source
<img>,<object> , 「」<embed> 파일을 SVG 하는 .jpg,gif ★★★★★★★★★★★★★★★★★」png
<img>
<object>
<embed>
jpg
gif
png
각각의 코드가 가능한 한 잘 작동하도록 하기 위해 무엇을 해야 할까요? (연구에 mimtype을 포함하거나 폴백 SVG 렌더러를 가리키는 참조가 있지만 최신 참조의 상태가 좋지 않습니다.)
Modernizr에서 SVG 지원을 확인하고 폴백한다고 가정합니다(아마 플레인과의 교환을 실시하고 있을 것입니다).<img>svG svG의 tag)를합니다.
SVG Primer(W3C에 의해 제공됨)를 추천할 수 있습니다.이 토픽은 다음과 같습니다.
「 」를 사용하고 <object>이치카미
<object data="your.svg" type="image/svg+xml"> <img src="yourfallback.jpg" /> </object>
*) 무료는 아닙니다.브라우저에 따라서는 양쪽의 리소스가 다운로드되기 때문에, Larry의 제안으로 이 문제를 회피할 수 있는 방법을 확인해 주세요.
2014년 업데이트:
사용하는 svg를 합니다.<img>IE Android < 3 의의의의 ) 。「 」 、 「 」 、 「 」 、 「 」
<img src="your.svg" onerror="this.src='your.png'">
이것은 GIF 이미지와 같이 동작하며 브라우저가 선언 애니메이션(SMIL)을 지원하는 경우 재생됩니다.
svg를 는, 「svg」의 어느쪽인가를 합니다.<iframe> ★★★★★★★★★★★★★★★★★」<object>
<iframe>
할 수 있는 해야 할 svg를 하십시오.<embed>.
css svg의 background-imagemodernizr은 폴백 이미지로 전환하는 방법 중 하나이며, 다른 하나는 여러 배경에 의존하여 자동으로 수행하는 방법입니다.
background-image
div { background-image: url(fallback.png); background-image: url(your.svg), none; }
메모: Android 2.3에서는 멀티 백그라운드를 지원하지만 svg는 지원하지 않기 때문에 멀티 백그라운드 전략은 작동하지 않습니다.
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"); });
srcset
현재 대부분의 브라우저는 다른 사용자에게 다른 이미지를 지정할 수 있는 속성을 지원합니다.예를 들어 1x 및 2x 픽셀 밀도에 사용할 수 있으며 브라우저가 올바른 파일을 선택합니다.
에서 srcset하지 않습니다.doesn우는 the the the the the the 로 .★★★★★★★★★★★★★★★★,src.
src
<img src="logo.png" srcset="logo.svg" alt="My logo">
이 방법에는 다른 솔루션보다 다음과 같은 이점이 있습니다.
SVG를 CSS에서 완전히 스타일링할 필요가 있는 경우 DOM에서 인라인으로 해야 합니다. 요소으로 SVG로 대체됨)를하는 SVG을 통해 할 수 . SVG Javascript HTML ( 반반 sv sv sv sv ),<img>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)과 "Direction"이 됩니다.<img>는, 에 기재되어 됩니다.src이기능은 SVG를 지원하는 모든 합니다.
onload="SVGInject(this)
면책사항:저는 SVGInject의 공동저자입니다.
다른 디바이스에서 SVG 이미지를 사용하는 것이 가장 좋은 옵션입니다.
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
저는 개인적으로는<svg>태그를 붙이면 완전히 제어할 수 있기 때문입니다.에서 사용하는 경우<img>SVG는 CSS를 사용합니다.
<svg>
또 하나는 브라우저 지원입니다.
를 열어주세요.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 힌트
<img> 태그를 사용하면 웹킷 기반 브라우저는 내장된 비트맵 이미지를 표시하지 않습니다.
SVG 인라인 서비스를 포함하여 모든 종류의 고급 SVG 사용에 가장 유연합니다.
Internet Explorer 및 Edge는 SVG의 크기를 올바르게 조정하지만 높이와 너비를 모두 지정해야 합니다.
svg 내부의 온클릭, 온마우스오버 등을 SVG의 모든 모양에 추가할 수 있습니다: onmouseover="top.myfunction(evt)";
일반 스타일시트에 웹 글꼴을 포함시킴으로써 SVG에서 웹 글꼴을 사용할 수도 있습니다.
주의: Illustrator에서 SVG를 내보내는 경우 웹 글꼴 이름이 잘못되었습니다.이 문제는 CSS에서 수정하여 SVG에서 문제를 일으키지 않도록 할 수 있습니다.예를 들어, 일러스트레이터가 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에서는 웹 글꼴의 크기가 부정확하게 조정됩니다.일반 텍스트에서 굵은 글씨 또는 기울임꼴로 많이 전환되는 경우 전환 지점에 약간의 여유 공간이 있을 수 있습니다.자세한 내용은 이 질문의 답변을 참조하십시오.
사용의 마지막 모두 2019년 SVG를 할 수 .<img>★★★★
출처: 사용할 수 있습니까?
그래서 굳이 쓸 필요가 없다고 말할 수 있다.<object>★★★★★★★★★★★★★★★★★★.
단, 다음과 같은 장점이 있습니다.
Chrome Dev Tools 등)를 검사하면 SVG 마크업 전체를 볼 수 있습니다.SVG 마크업을 조금 수정하여 라이브 변경을 확인할 수 있습니다.
브라우저가 SVG를 지원하지 않는 경우(기다리지만 모두 지원합니다!) 매우 견고한 폴백 구현을 제공합니다.SVG를 찾을 수 없는 경우에도 이 기능은 작동합니다.이것이 베타맥스나 HD-DVD와 같은 XHTML2 사양의 주요 특징이었다.
단점도 있습니다.
<amp-img>
다음은 SVG를 HTML 템플릿에 삽입하기 위해 찾을 수 있는 모든 방법과 차이점 및 주요 장단점을 정리한 것입니다.
((( 1 )))
/* in CSS */ background-image: url(happy.svg);
이 방법으로는 JS의 상호작용도 CSS 자체도 svg 부품에 대해 보다 세밀한 제어를 할 수 없습니다.
((( 2 )))
<img src="happy.svg" />
( ( ( ) )와 마찬가지로 JS 인터랙션을 허용하지 않으며, CSS 자체도 svg 부분에 대해 보다 세밀한 제어를 할 수 없습니다.
메서드 ( ( ( ( ) )및 ( ( ( ( ))))는 스태틱 svg가 필요한 경우에만 사용할 수 있습니다.
을 사용하는 : " " " 를 합니다.<img>SVG)에서)srcset 및 Atribute를 하지 않습니다 ""Atribute" Fallback ( ) 。src이치노
<img src="logo.png" srcset="logo.svg" alt="my logo">
((( 3 )))
<div> <!-- Paste the SVG code directly here. --> <svg>...</svg> <!-- AKA an inline svg --> <!-- would be the same if is created and appended using JavaScript. --> </div>
이 메서드에는 ( ( ( ) )및 ( ( ( ))에 기재되어 있는 경고는 없습니다만, 이 메서드에서는 템플릿코드가 지저분해지고 SVG도 카피 페이스트 되기 때문에, 각각의 파일에는 포함되지 않습니다.
((( 4 )))
<object data="happy.svg" width="300" height="300"></object>
또는:
이 방법을 사용하면 외부 CSS를 사용하여 SVG에 액세스할 수 없지만 JavaScript를 사용하여 액세스할 수 있습니다.
((( 5 )))
iconfu/svg-inject를 사용하여 SVG를 개별 파일에 보관하고(템플릿 코드를 훨씬 깔끔하게 유지), 이제 다음을 사용하여 SVG를 추가합니다.<img>"Svg-inject" "SVG" "CSS" JavaScript" "Svg-inject" 입니다.
주 1: 이 방법은 다음과 같은 경우에도 사용할 수 있습니다.imgs는 s의 스크립트입니다.
img
주의 2: 이 방법으로 추가한 SVG도 이미지와 마찬가지로 브라우저에 의해 캐시됩니다.
((( 6 )))
SVG 하여 SVG를 사용합니다.<use>태그 삽입을 합니다.이 방법은 ((5))와 같은 효과를 가지기 때문에 매우 유연합니다.이 비디오에서는, 이 방법(및 그 외)을 실제로 사용하고 있습니다.
<use>
((( 7 )))
(리액트 고유의 방법) 리액트 컴포넌트로 변환하거나 로드하는 컴포넌트를 작성합니다.
((( 8 )))
<embed src="happy.svg" />
MDN에 따르면 대부분의 최신 브라우저는 브라우저 플러그인에 대한 지원을 폐지했습니다.은, 「」에 의존해, 「」에 의존합니다.<embed>보통 사용자의 브라우저에서 사이트를 조작할 수 있도록 하려면 일반적으로는 적합하지 않습니다.
는 w3schools를 <embed>태그는 패턴과 마스크가 혼합된 svg를 Chrome에서 작동하게 한 유일한 것입니다.
<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />
Firefox는 괜찮았지만,
<svg style="width:100%"> <use xlink:href="logo.svg#logo"></use> </svg>
Chrome이 구배를 렌더링하지 않았습니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1"> <title>digicraft punchcard logo</title> <defs> <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%"> <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" /> </linearGradient> <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" /> </pattern> <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="21" height="20" fill="skyblue" /> <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" /> <rect x="0" y="105" width="20" height="20" fill="skyblue" /> <rect x="0" y="126" width="21" height="20" fill="skyblue" /> </pattern> <mask id="punchcard-mask" width="10" height="100%"> <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" /> </mask> </defs> <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" /> </svg>
도 마찬가지입니다.<object> ★★★★★★★★★★★★★★★★★」<img>두 브라우저 모두에서.
완전한 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를 삽입하는 것이 아이디어입니다.
자세한 내용은 제 블로그에서 확인하실 수 있습니다.
개인적인 경험에 비추어 볼 때 svg 아이콘이 많거나 한 페이지에 동적으로 추가되면 속도가 느려지고 성능이 저하되는 이미지 태그에 svg 파일을 로드하는 것이 좋습니다.
<img src="./file.svg"/> is better performance than <div><svg>.....</svg></div>
그러나 호버에 css 스타일을 할당하려면 embedd를 사용해야 합니다.
는 ""를 할 것을 합니다.<object>images.svG it태그 약간한 효과를제공하려면 할 수 있는 조금 부자연스럽지만 역동적인 효과를 주고 싶다면 가장 신뢰할 수 있는 방법입니다.
인터랙션이는, 「」를 해 .<img>CSS에 의한 것입니다.
또는 iframe 할 수 iframe SVG는 피하는 것이 .<embed>
하지만 SVG를 가지고 놀고 싶다면
내장형으로 선택
<svg> <g> <path> </path> </g> </svg>
이 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">
더 요.<svg>svg.svg.를 직접 를 붙입니다. tag하지 않고 svg 파일을 복사합니다.을 사용하다
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>
는 SVG를 할 수 .<img>HTML "StackOverflow" "StackOverflow" "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/kyc.svg
그 후 (이미지 아이콘을 사용하지 않고) html 태그를 수동으로 추가했습니다.
<img src='https://svgshare.com/i/kyc.svg' title='Intersection of 3 Circles'/>
결과는 다음과 같습니다.
「」를 사용합니다.data:image
data:image
약간의 의문이 있는 사용자에게는 StackOverflow의 SVG 이미지 삽입에 대한 답변에 따라 편집한 내용을 확인할 수 있습니다.
에는 "SVG"-1이 포함되어 있어야 합니다.<?xml?> 。에는 file에에, 저gggggggggggg로 시작하는 파일을 작성했습니다.<svg> 아무 안 했어요!
<?xml?>
고-2: 음-2를 사용하여 이미지를 삽입하려고 .IMAGE의 Edit ToolbarSVG "URL" "StackOverflow" "StackOverflow" "StackOverflow" 입니다.<img>태그를 수동으로 추가해야 합니다.
IMAGE
Edit Toolbar
이 답변이 다른 사용자에게 도움이 되었으면 합니다.
svg 코드를 div에 삽입하는 것이 효과적입니다.이 간단한 예에서는 javascript를 사용하여 div inner를 조작합니다.HTML.
svg = '<svg height=150>'; svg+= '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />'; svg+= '<text x=150 y=95 font-size=60 text-anchor=middle fill=red>IIIIIII</text></svg>'; document.all.d1.innerHTML=svg;
<div id='d1' style="float:right;"></div><hr>
의 조합을 사용할 것을 권장합니다.
<svg viewBox="" width="" height=""> <path fill="#xxxxxx" d="M203.3,71.6c-.........."></path> </svg>
언급URL : https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files