SVG 파일에 <img>, <object> 또는 <embed>를 사용합니까?

603

내가 사용 하는가 <img>, <object>또는 <embed>로딩 유사한 방법으로 페이지에로드 SVG 파일을 jpg, gif또는 png?

가능한 한 잘 작동하도록하기위한 코드는 무엇입니까? (저는 연구에서 mimetype을 포함하거나 SVG 렌더러를 대체하는 것에 대한 언급을 보았으며 최신 기술 참조를 보지 못했습니다).

Modernizr을 사용 하여 SVG 지원을 확인하고 SVG를 지원 <img>하지 않는 브라우저를 대체합니다 (일반 태그 로 대체 ).

html  svg  vector-graphics 
— Artlung
소스
3
— Machado
2
이론적으로 <svg>다른 SVG를 참조 할 수도 있습니다 . 예를 들어를 사용하여이 작업을 수행 할 수 있습니다 <image>.
— phk

답변:

635

이 주제를 다루는 SVG Primer (W3C에서 공개)를 추천 할 수 있습니다. http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

사용하는 경우 <object>래스터 폴 백이 무료로 제공됩니다 * :

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) 글쎄, 무료는 아닙니다. 일부 브라우저는 두 가지 리소스를 모두 다운로드하기 때문에 아래의 래리 제안을 참조하십시오.

2014 년 업데이트 :

  • 비대화 형 svg를 원한다면 <img>png 버전으로 스크립트 폴 백과 함께 사용하십시오 (이전 IE 및 android <3의 경우). 이를위한 하나의 깨끗하고 간단한 방법 :

    <img src="your.svg" onerror="this.src='your.png'">.

    이것은 GIF 이미지처럼 작동하며 브라우저가 선언적 애니메이션 (SMIL)을 지원하는 경우 재생됩니다.

  • 대화식 svg를 원하면 <iframe>또는을 사용하십시오 <object>.

  • 구형 브라우저에 svg 플러그인을 사용할 수있는 기능을 제공해야하는 경우을 사용하십시오 <embed>.

  • CSS background-image및 유사한 속성의 svg의 경우 modernizr 은 대체 이미지로 전환하기위한 하나의 선택이며 다른 하나는 자동으로 수행하는 여러 배경에 따라 다릅니다.

    div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}

    참고 : 다중 배경 전략은 여러 배경을 지원하지만 svg는 지원하지 않기 때문에 Android 2.3에서는 작동하지 않습니다.

또 다른 좋은 읽을 거리는 svg 대체에 대한 이 블로그 게시물 입니다.

— 에릭 달 스트롬
소스
7
크기를 설정하는 올바른 방법은 무엇입니까? 높이 및 너비 속성을 포함 시키거나 CSS를 사용합니까?
— artlung
5
CSS를 사용하거나 포함 요소의 크기를 설정하면 (즉, iframe, 포함, 객체, img 중 하나) 크기를 정의하는 스타일 시트 전에 스타일이없는 내용의 플래시를 피할 수 있습니다. 로드됩니다. 또한 svg에 viewBox 속성이 있는지 확인하고 svg 루트 요소에서 너비 / 높이 속성을 제거하십시오. 내 경험상 최고의 크로스 브라우저 동작을 제공합니다.
— Erik Dahlström
8
이 방법은 항상 래스터 파일을 다운로드합니다. 이 답변 은 대체 IE 브라우저에서만 폴 백이 요청되도록합니다.
— Larry
3
위의 내용은 Adobe SVG 플러그인에서 작동하지 않습니다. 그러나 태그 <param name="src" value="your.svg" />안에 추가하면 모든 것이 작동하도록 할 수 있습니다 (현대 브라우저 + ASV + MSIE) <object>. 나는 그 모든 일을하는 방법을 알아 내려고 오랜 시간을 보냈으며 마침내 그것을 얻었습니다.
— Christopher Schultz
5
사람들이 고대 브라우저를 더 빨리 지원하지 않으면 브라우저를 최신 상태로 유지하는 사회가 더 빨라질 것입니다. 2012 년부터는 자동으로 브라우저를 사용할 수도 있습니다. 예 : 여전히 Windows XP (아마도 버전 52)를 지원합니다. 항상 현대적이고 자유로운 대안이 있습니다.
— Neonit
116

IE9 이상에서는 일반 IMG 태그에서 SVG를 사용할 수 있습니다.

https://caniuse.com/svg-img

<img src="/static/image.svg">
— 크리스천 란드 그렌
소스
35
SVG에 다른 리소스를로드해야하는 경우에는 작동하지 않습니다. (글꼴, 이미지, ...)
— TheHippo
10
로고 또는 아이콘의 경우, 의미상의 이유로 IMG 태그를 사용하는 것이 좋으며 SVG가 단지 벡터 일러스트인지 확인하십시오.
— Christian Landgren
4
이제 모든 곳에서 받아 들였습니다. @ artlung, 당신은 이것에 대한 답변을 바꾸고 싶을 수도 있습니다.
— SteeveDroz
15
<img/>태그를 사용하는 사람 은 SVG Fragement 식별자 (예 : " <img src="myimage.svg#svgView(preserveAspectRatio(none))" />")를 추가 viewBox하여 인라인 SVG 정의와 동일하게 종횡비 등 을 제어 할 수 있습니다 . 스케일링에 대한 추가 정보 -css-tricks.com/scale-svg
— brichins
101

<object> 과 <embed> 흥미로운 속성이 있습니다 : 그들은 (계정에 동일 출처 정책을 복용)이 가능 외부 문서에서 SVG 문서에 대한 참조를 취득 할 수 있습니다. 그런 다음이 참조를 사용하여 SVG에 애니메이션을 적용하고 스타일 시트를 변경하는 등의 작업을 수행 할 수 있습니다.

주어진

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

그런 다음과 같은 일을 할 수 있습니다

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});
— WGH
소스
<object> 요소에서 "load"이벤트가 발생하지 않는다고 생각합니다. 지원되지 않습니다.
— Steve O'Connor
5
@ SteveO'Connor 잘 모르겠지만 아마도 잘 문서화되어 있지는 않지만 Firefox, IE11 및 Chrome에서 작동합니다. 적어도 외부 SVG 파일의 경우 : 데이터 URI에서 작동하지 못했습니다.
— WGH
잘 작동합니다! 흥미롭게도, 두 개의 SVG 파일이있을 때 'id'필드를 추가 해야하는 것 같습니다. 그렇지 않으면 오페라 브라우저에 1 만 표시됩니까?
— Bram
이 방법으로 인라인 및 참조를 최대한 활용하십시오!
— Brandito
그것의 좋은 점에 유의하는 SVG 내부 하이퍼 링크가 됩니다 SVG를 제외하지 작업 인라인입니다.
— Mentalist
26

가장 좋은 방법은 다른 장치에서 SVG 이미지를 사용하는 것입니다. :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
— 로버트 솔리스
소스
3
흥미 롭군 그러나 onerrorsvg가 렌더링되지 않으면 화재가 발생합니까? 어떤 브라우저를 테스트 했습니까?
— artlung
1
예, 저는 모바일 안드로이드 OS, 기본 브라우저에서 테스트했습니다 :)
— Roberth Solís
24

사용하다 srcset

오늘날 대부분의 최신 브라우저는 srcset속성을 지원 합니다 다른 사용자에게 다른 이미지를 지정할 수 있습니다. 예를 들어, 1x 및 2x 픽셀 밀도로 사용할 수 있으며 브라우저가 올바른 파일을 선택합니다.

이 경우 SVG에서 SVG를 지정 srcset하고 브라우저가이를 지원하지 않으면에서로 대체됩니다 src.

<img src="logo.png" srcset="logo.svg" alt="My logo">

이 방법은 다른 솔루션보다 몇 가지 이점이 있습니다.

  1. 이상한 해킹이나 스크립트에 의존하지 않습니다.
  2. 간단 해
  3. 여전히 대체 텍스트를 포함 할 수 있습니다
  4. 지원하는 브라우저는 srcset필요한 파일 만 다운로드 할 수 있도록 처리 방법을 알고 있어야합니다.
— 낙서 꾼
소스
5
요즘 어떤 브라우저에서 SVG를 지원할 확률이 99 %를 초과 할 가능성이 있다고 생각 하는가?
— Robert Longson
5
모든 사람이 페이지를 정확하게 볼 수 있도록하는 부분에서 Google이 더 많은 것을 사랑할 것입니다!
— Hoots
2
현재 시점에서 폴백 이미지를 사용자의 ~ 10 %로 푸시한다는 점을 고려하면 이전보다 더 좋아 보입니다.
— Volker E.
2
@VolkerE. 10 %? caniuse는 약 2 % 의 SVG 지원 부족을 보여줍니다 . 나는 여전히 2 %를 지원하기 위해 답변에서와 같이 srcset을 사용합니다. 앞으로 브라우저가 srcset과 같은 정보를 가져와 장치 크기 나 파일 형식 지원뿐만 아니라 성능 및 크기와 같은 요소를 기반으로 적절한 이미지를 선택할 수 있기를 바랍니다.
— Scribblemacher
3
이 솔루션의 문제는 브라우저가 SVG를 지원하지만 srcset은 지원하지 않는 경우입니다. SVG를 지원하더라도 PNG로 다시 돌아가는 IE11과 같은
— Hego555
16

SVG로 CSS를 완전히 스타일링 할 수 있으려면 DOM에서 인라인이어야합니다. 이는 자바 스크립트를 사용하여 HTML 요소 (일반적으로 <img>요소)를 페이지가로드 된 후 SVG 파일의 내용 으로 대체하는 SVG 주입을 통해 달성 할 수 있습니다 .

SVGInject 를 사용하는 최소한의 예는 다음과 같습니다 .

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

이미지가로드 된 후 onload="SVGInject(this)주입이 트리거되고 <img>요소는 제공된 파일의 내용으로 대체됩니다.src 속성에 . SVG를 지원하는 모든 브라우저에서 작동합니다.

면책 조항 : 저는 SVGInject의 공동 저자입니다

— 와루 야마
소스
15

<svg>태그를 완전히 제어 할 수 있기 때문에 개인적으로 태그를 사용 합니다 . 그것을 사용하면 <img>CSS 등으로 SVG의 내부를 제어 할 수 없습니다.

또 다른 것은 브라우저 지원 입니다.

svg파일을 열고 템플릿에 바로 붙여 넣기 만하면 됩니다.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

그런 다음 CSS에서 간단하게 예를 들면 다음과 같습니다.

svg {
  fill: red;
}

일부 리소스 : SVG 팁

— LazerBanana
소스
15

<img> 태그 를 사용하면 웹킷 기반 브라우저에 포함 된 비트 맵 이미지가 표시되지 않습니다 .

SVG 인라인 제공을 포함하여 모든 종류의 고급 SVG 사용에있어 유연성이 가장 뛰어납니다.

Internet Explorer 및 Edge는 SVG의 크기를 올바르게 조정 하지만 높이와 너비를 모두 지정해야합니다.

SVG에서 onclick, onmouseover 등을 SVG의 모든 모양에 추가 할 수 있습니다 . onmouseover = "top.myfunction (evt);"

SVG에서 웹 글꼴 을 일반 스타일 시트에 포함시켜 사용할 수도 있습니다 .

참고 : Illustrator에서 SVG를 내보내는 경우 웹 글꼴 이름이 잘못됩니다. CSS에서이를 수정하고 SVG에서 혼란을 피할 수 있습니다. 예를 들어 Illustrator는 Arial에 잘못된 이름을 지정하며 다음과 같이 수정할 수 있습니다.

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

이 모든 것은 2013 년 이후 출시 된 모든 브라우저에서 작동합니다 .

예를 들어, ozake.com을 참조하십시오 . 전체 사이트는 문의 양식을 제외하고 SVG로 구성됩니다.

경고 : Safari에서 웹 글꼴의 크기가 정확하게 조정되지 않습니다. 일반 텍스트에서 굵은 체 또는 이탤릭체로의 전환이 많으면 전환 지점에 약간의 추가 공간이 없거나 누락 된 공간이있을 수 있습니다. 자세한 내용은 이 질문에 대한 답변 을 참조하십시오.

— 앤드류 스위프트
소스
감사합니다. 래스터 이미지가 왜 img태그에 표시되지 않는지 알아 내기 위해 3 시간 동안 머리를 내 밀었습니다 .
— ryebread
@Andrew Swift, dev.ozake.com 에서 멋진 시각적 결과를 얻을 수 있지만 심각한 접근성 문제가 있습니다. 검색 엔진이 사이트를 색인화하는 데 어려움 을 겪을 것입니다 (SVG 이벤트 내에 숨겨진 링크를 선택하지는 않을 것입니다) ; 키보드로 사이트를 탐색 할 수 없습니다. 스크린 리더가 질식 할 것 같다 ...
— interDist
11

내 2 센트 : 2019 년 현재 사용중인 브라우저의 93 % (및 각 브라우저의 마지막 두 버전의 100 %)가 SVG를 <img>요소로 처리 할 수 ​​있습니다 .

여기에 이미지 설명을 입력하십시오

출처 : 사용 가능

따라서 더 이상 사용할 이유가 없다고 말할 수 있습니다 <object>.

그러나 여전히 장점이 있습니다 .

  • 검사 할 때 (예 : Chrome 개발자 도구를 사용하여) 약간의 변조와 실제 변경 사항을 확인하려는 경우 전체 SVG 마크 업이 표시됩니다.

  • 브라우저가 SVG를 지원하지 않는 경우 (대기하지만 모든 것이 지원하는 경우) 매우 강력한 대체 구현을 제공하며 SVG를 찾을 수없는 경우에도 작동합니다. 이것은 베타 맥스 또는 HD-DVD와 같은 XHTML2 사양의 핵심 기능이었습니다.

그러나 단점 도 있습니다 .

— fffs
소스
3

순수한 CSS와 이중 이미지 다운로드없이 하나의 솔루션을 찾았습니다. 내가 원하는대로 아름답지는 않지만 작동합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

아이디어는 대체 스타일로 특수 SVG를 삽입하는 것입니다.

자세한 내용과 테스트 프로세스는 내 블로그 에서 찾을 수 있습니다 .

— 아르투
소스
0

이 jQuery 함수는 svg 이미지의 모든 오류를 캡처하고 파일 확장자를 대체 확장자로 바꿉니다.

이미지 svg 로딩 오류 를 보려면 콘솔을여십시오

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">
스 니펫 확장

— 안드레스 세 파르
소스
-1

나는 조합을 사용하는 것이 좋습니다

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
— Grv97
소스
이러한 설정을 사용하는 이유와 다른 답변과 다른 이유에 대해 자세히 설명해 주시겠습니까?
— kvantour
-1

다음을 사용하여 SVG를 간접적으로 삽입 할 수 있습니다 <img>HTML 태그를 있으며 이는 아래 설명 된대로 StackOverflow에서 가능합니다.

내 PC에 SVG 파일이 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

이 이미지를 https://svgur.com에 업로드했습니다

업로드가 종료 된 후 다음 URL을 얻었습니다. 

https://svgshare.com/i/H7d.svg

그런 다음 html 태그 다음에 수동으로 (IMAGE 아이콘을 사용하지 않고) 추가했습니다.

<img src="https://svgshare.com/i/Kyp.svg"/>

결과는 바로 아래에 있습니다

의심스러운 사용자의 경우 SVG 이미지를 삽입하는 StackOverflow 에서 다음 답변 을 편집하여 수행 한 작업을 볼 수 있습니다

비고 -1 : SVG 파일은 <?xml?>요소 를 포함해야합니다 . 처음에는 <svg>태그로 직접 시작하는 SVG 파일을 만들었지 만 아무런 효과가 없습니다!

비고 -2 : 처음에의 IMAGE아이콘을 사용하여 이미지를 삽입하려고했습니다 Edit Toolbar. SVG 파일의 URL을 붙여 넣지 만 StackOverflow는이 방법을 허용하지 않습니다. 그만큼<img>태그를 수동으로 추가해야합니다.

이 답변이 다른 사용자에게 도움이되기를 바랍니다.

— 슐레 베
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.