SVG 파일에 <img>, <object> 또는 <embed>를 사용합니까? 하는가 <img>, <object>또는 <embed>로딩 유사한 방법으로

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

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

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

답변

이 주제를 다루는 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 대체에 대한 이 블로그 게시물 입니다.

답변

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

https://caniuse.com/svg-img

<img src="/static/image.svg">

답변

<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");
});

답변

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

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

답변

사용하다 srcset

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

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

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

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

  1. 이상한 해킹이나 스크립트에 의존하지 않습니다.
  2. 간단 해
  3. 여전히 대체 텍스트를 포함 할 수 있습니다
  4. 지원하는 브라우저는 srcset필요한 파일 만 다운로드 할 수 있도록 처리 방법을 알고 있어야합니다.

답변

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의 공동 저자입니다

답변

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