[google-chrome] Chrome이 <img> 태그를 통해 참조 된 SVG를 렌더링하지 않음

Program / 글쓴이

img 태그로 svg를 렌더링하지 않는 Google 크롬에 문제가 있습니다. 이는 페이지를 새로 고치고 초기 페이지를로드 할 때 발생합니다. “Inspecting Element”를 클릭 한 다음 svg 파일을 마우스 오른쪽 버튼으로 클릭하고 새 탭에서 svg 파일을 열어 이미지를 표시 할 수 있습니다. 그러면 svg 이미지가 원본 페이지에 렌더링됩니다.

<img src="../images/Aged-Brass.svg">

여기서 문제가 무엇인지 완전히 손실되었습니다. svg 이미지는 Chrome 또는 Safari가 아닌 IE9 및 FF에서 잘 렌더링됩니다.

내 MIME 유형도 설정되어 있습니다. (이미지 / svg + xml)

편집 :
여기 내 문제를 설명하기 위해 만든 간단한 html 페이지가 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

보시다시피 img 태그와 css에서 배경 이미지로 svg 파일을 사용하려고합니다. Chrome 또는 Safari의 초기 페이지로드에서 작동하지 않습니다. 요소를 마우스 오른쪽 버튼으로 클릭하고 svg를 클릭하거나 다른 창에서 svg로드에 대한 링크를 클릭하면 svg 파일이 원래 탭에서 렌더링됩니다.

답변

간단하고 쉬운 방법; https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ 에 따르면

.SVG 파일을 텍스트 편집기 (예 : 메모장)로 열고 변경해야합니다.

xlink:href="data:img/png;base64,

에:

xlink:href="data:image/png;base64,

그것은 나를 위해 일했습니다!

답변

svg-tag에는 네임 스페이스 속성 xmlns가 필요합니다.

<svg xmlns="http://www.w3.org/2000/svg"></svg>

답변

나는 같은 문제가 있었기 때문에 여기에 왔습니다. 요소를 검사 할 때 파일을 볼 수 있지만 사이트에서는 볼 수 없습니다 (localhost를 사용하는 경우에도)

내 문제에 대한 대답은 SVG 파일을 저장하는 것입니다. Illustrator에서 저장 한 경우 ‘링크’가 아닌 ‘삽입’을 클릭해야합니다. 링크는 데이터를 포함하는 대신 로컬 파일을 참조합니다 (올바르게 이해하는 경우).
여기에 이미지 설명 입력

http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html 내보내기에 대한 다른 유용한 팁이있는 adobe 웹 사이트에서 이에 대해 읽었습니다
.

이것은 나를 위해 일했으며 유용하기를 바랍니다.

답변

비슷한 문제가있어서 이미지가 렌더링되지 않았기 때문에 여기에 왔습니다. 내가 알아 낸 것은 내 테스트 서버의 콘텐츠 유형 헤더가 올바르지 않다는 것입니다. .htaccess 파일에 다음을 추가하여 수정했습니다.

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

답변

<object>대신 사용하십시오 (물론 각 URL을 자신의 URL로 대체하십시오).

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

스 니펫 확장

답변

(svg 소스 XML을 편집하여) [svg] 태그에 width 속성을 추가하는 것이 저에게 효과적이었습니다. 예 :

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...
</svg>

답변

샘플을 사용하여 테스트 페이지를 만들 수 있었고 제대로 작동했습니다. 내 가정은 svg 파일에 문제가 있다는 것입니다. 여기에도 붙여 넣을 수 있나요? 다음은 내가 사용한 샘플입니다.

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>