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

Question 1

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 파일이 원래 탭에서 렌더링됩니다.

Question 2

간단하고 쉬운 방법; 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,

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

Question 3

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

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

Question 4

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

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

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

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

Question 5

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Question 6

<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>

스 니펫 확장

Question 7

(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>

Question 8

샘플을 사용하여 테스트 페이지를 만들 수 있었고 제대로 작동했습니다. 내 가정은 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>

Question 9

Chrome 버그처럼 보이지만 화면에 표시되는 svg 개체의 CSS를 변경하면 Chrom 디버거를 사용하여 거의 미쳤 기 때문에 다른 작업을 수행했습니다.

그래서 내가 한 일은 : 1. 화면 크기를 확인합니다. 2. 내 SVG 개체의 "로드"이벤트를 수신합니다. 3. 요소가로드 될 때 jQuery를 사용하여 CSS를 변경합니다. 4. 그것은 나를 위해 트릭을했습니다.

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}

width: 180px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>

스 니펫 확장

Question 10

비슷한 문제가 있었고 이에 대한 기존 답변이 적용되지 않았거나 작동했지만 다른 이유로 사용할 수 없었습니다. 그래서 Chrome이 SVG에 대해 싫어하는 점을 파악해야했습니다.

우리의 경우 SVG 파일 id의 symbol태그 속성에 :Chrome이 싫어하는 속성이있는 것으로 밝혀졌습니다 . 내가 제거하자마자 :잘 작동했습니다.

나쁜:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

좋은:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>

Question 11

.svg이미지에는 초기 높이와 너비가 없습니다. 따라서 보이지 않습니다. 설정해야합니다.

인라인 또는 css 파일에서 수행 할 수 있습니다.

인라인 :

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

CSS 파일 :

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}

Question 12

제 경우에는 Photoshop을 사용하여 svg를 만들고 저장할 때이 문제가 지속되었습니다. 도움이 된 것은 Illustrator를 사용하여 파일을 열고 나중에 svg를 내보내는 것입니다.

Question 13

처음에는 Photoshop CC에서 SVG를 내 보냈고 수동으로 추가해야했습니다.

version="1.1"에 <svg>태그

크롬에 표시되도록합니다.

Question 14

서버의 HTTP 헤더에있는 콘텐츠 유형이 문제였습니다. node.js 서버가 추가되었습니다.

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

pageName은 요청 된 항목에 대한 내 지역 변수입니다.

제 생각에는 이것이 일반적인 문제입니다! 현재 Chrome 버전 (2020 년 3 월)을 사용하고 있습니다.

Question 15

같은 문제가있었습니다. 서버가 올바르게 구성되어 있고 .htacces가 정답이 아닌 경우 포함하는 svg 소스를 살펴볼 수 있습니다. Mine은 텍스트 편집기로 만들어졌고 html5 코드 내 Chrome & Safari에서 잘 렌더링되었으며 일단 삽입되면 아무것도 표시되지 않았습니다. svg 코드에 올바른 버전, 치수 등을 추가하고 매력처럼 작동합니다. 또한 모든 스타일이 인라인됩니다.

즉

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>

Question 16

추가 한 후에도 DOCTYPE예상대로 작동 하는 크롬에서도 동일한 문제가 발생 했습니다.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

전에

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

후

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

Question 17

svg 이미지에 대한 전환 CSS 속성 이 없는지주의하십시오.

이유는 모르겠지만 Chrome의 svg 이미지에 대해 "전환 : 모든 완화 0.3 초"를 만들면 이미지가 나타나지 않습니다.

예 :

* {
   transition: all ease 0.3s
  }

Chrome은 svg를 렌더링하지 않습니다.

전환 CSS 속성을 제거하고 다시 시도하십시오.

Question 18

문제가 발생하면 먼저 svg- 이미지를 읽을 수있는 프로그램으로 이미지를 열어보십시오.
실패하면 svg 이미지가 어떻게 든 손상됩니다.

나는 그 경우를 가지고 새로운 svg-image에 svg-paths를 복사하고 svg-tags의 모든 세부 사항을 조정했습니다.

나는 그것이 렌더링되지 않는 이유를 테스트하지 않았지만 보이지 않는 특수 신호가 렌더링 오류를 일으켰다 고 가정합니다. 때때로 Mac에서 파일을 편집하는 경우 이미 다른 컨텍스트 에서이 문제가 발생했습니다.

Question 19

IMG 태그를 통해 포함 된 SVG 이미지에서 동일한 문제가 발생했습니다. Chrome은 파일 상단에 빈 줄이있는 것을 좋아하지 않는 것으로 나타났습니다.

빈 줄을 제거하고 SVG는 즉시 렌더링을 시작했습니다.

Question 20

이미지 스타일을 추가했는지 확인합니다 . 그것은 나를 위해 일했습니다

style= "width:320; height:240"

Question 21

Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>