PHP에서 템플릿 svg가 표시되지 않는 문제를 해결하는 방법

웹 개발에서는 이미지를 사용해야 하는 경우가 많으며, SVG(Scalable Vector Graphics)는 왜곡 없이 적응적으로 크기를 조정할 수 있는 매우 유용한 형식이므로 점점 개발자들의 선호도가 높아지고 있습니다. PHP에는 SVG 이미지 사용을 지원하는 라이브러리도 많이 있지만 때로는 SVG 이미지가 제대로 표시되지 않는 문제가 발생할 수 있습니다. 이 글에서는 템플릿 엔진을 사용하여 PHP에서 SVG 이미지를 로드할 때 SVG 이미지가 표시되지 않는 문제가 발생하는 상황 중 하나를 소개하고 해결책을 제시합니다.

문제 설명

PHP에서 템플릿 엔진을 사용하여 SVG 이미지를 로드했지만 페이지에 정상적으로 표시되지 않고 빈 영역만 나타납니다.

문제 원인

SVG 이미지의 파일 구조는 XML 선언, 네임스페이스 등 특수한 속성을 포함하는 일반적인 HTML 파일 구조와 다릅니다. 이러한 속성은 템플릿 엔진에서 태그로 인식되어 렌더링 시 문제를 일으키고 SVG 이미지가 제대로 표시되지 않게 됩니다.

해결책

옵션 1: 템플릿 엔진에 의한 SVG 이미지 구문 분석 끄기

템플릿 엔진의 구성 파일에서 SVG 이미지 구문 분석을 설정하여 SVG가 표시되지 않는 문제를 방지할 수 있습니다. 구문 분석 오류로 인해 제대로 작동합니다.

Smarty를 예로 들면 구성 파일에 다음 구성을 추가할 수 있습니다.

// 关闭对SVG图像的解析
$smarty->security_settings['allowed_tags'] = array_diff($smarty->security_settings['allowed_tags'], array('svg'));
$smarty->security_settings['allowed_modifiers'] = array_diff($smarty->security_settings['allowed_modifiers'], array('svg'));

솔루션 2: SVG 태그 이스케이프

SVG 태그 앞에 이스케이프 문자 ""를 추가하면 템플릿 엔진이 이를 구문 분석하는 것을 방지할 수 있습니다. HTML 태그로 사용되므로 SVG 이미지가 제대로 표시되지 않는 문제를 피할 수 있습니다.

예를 들어,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M256 22.4C131.4 22.4 27.2 126.6 27.2 251.2S131.4 480 256 480s228.8-104.2 228.8-228.8S380.6 22.4 256 22.4zM256 406.2c-87.9 0-159.8-71.8-159.8-159.8s71.8-159.8 159.8-159.8 159.8 71.8 159.8 159.8S343.9 406.2 256 406.2z"/>
</svg>

코드를

\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  \<path d="M256 22.4C131.4 22.4 27.2 126.6 27.2 251.2S131.4 480 256 480s228.8-104.2 228.8-228.8S380.6 22.4 256 22.4zM256 406.2c-87.9 0-159.8-71.8-159.8-159.8s71.8-159.8 159.8-159.8 159.8 71.8 159.8 159.8S343.9 406.2 256 406.2z"/>
\</svg>

코드로 변환합니다. 이렇게 하면 템플릿 엔진이 SVG 태그를 HTML 태그로 인식하지 않고 SVG 이미지를 올바르게 렌더링합니다.

요약

PHP에서 SVG 이미지를 사용할 때, 특히 템플릿 엔진을 사용할 때 제대로 표시되지 않는 문제가 있을 수 있습니다. 이 문서에서는 템플릿 엔진의 SVG 이미지 구문 분석을 끄고 SVG 태그를 이스케이프하는 두 가지 솔루션에 대해 설명합니다. 이 문제가 발생하면 특정 상황에 따라 해당 솔루션을 선택할 수 있습니다.

위 내용은 PHP에서 템플릿 svg가 표시되지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!