ฉันจะใช้ <img>, <object> หรือ <embed> สำหรับไฟล์ SVG หรือไม่

603

ฉันควรใช้<img>, <object>หรือ<embed>สำหรับการโหลดไฟล์ SVG ลงในหน้าในลักษณะที่คล้ายกับการโหลดjpg, gifหรือpng?

รหัสสำหรับแต่ละรายการเพื่อให้แน่ใจว่าทำงานได้ดีที่สุดเท่าที่จะเป็นไปได้ (ฉันเห็นการอ้างอิงถึงการรวม mimetype หรือการชี้ไปที่ตัวแสดง SVG ทางเลือกในการวิจัยของฉันและไม่เห็นการอ้างอิงศิลปะที่ดี)

สมมติว่าฉันกำลังตรวจสอบการสนับสนุน SVG กับModernizrและถอยกลับ (อาจทำการแทนที่ด้วย<img>แท็กธรรมดา) สำหรับเบราว์เซอร์ที่ไม่รองรับ SVG

html  svg  vector-graphics 
— artlung
แหล่งที่มา
3
เพียงแค่ดูgithub.com/jonathantneal/svg4everybody
— Machado
2
ในทางทฤษฎีคุณอาจมี<svg>จากที่คุณต้องการอ้างอิง SVG อื่น ๆ <image>นี้สามารถทำได้เช่นการใช้
— phk

คำตอบ:

635

ฉันสามารถแนะนำรองพื้น SVG (เผยแพร่โดย W3C) ซึ่งครอบคลุมหัวข้อนี้: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

ถ้าคุณใช้<object>คุณจะได้รับ raster fallback ฟรี *:

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

*) ไม่ฟรีเพราะเบราว์เซอร์บางตัวดาวน์โหลดทรัพยากรทั้งคู่โปรดดูคำแนะนำของ Larry ด้านล่างเพื่อดูวิธีการแก้ไข

อัปเดต 2014:

  • หากคุณต้องการ svg แบบไม่โต้ตอบให้ใช้<img>กับสคริปต์ fallbacks เป็นเวอร์ชัน png (สำหรับ IE รุ่นเก่าและ Android <3) วิธีหนึ่งที่สะอาดและเรียบง่ายในการทำเช่นนั้น:

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

    สิ่งนี้จะทำงานเหมือนภาพ GIF และหากเบราว์เซอร์ของคุณรองรับภาพเคลื่อนไหวที่เปิดเผย (SMIL) ภาพเหล่านั้นจะเล่น

  • ถ้าคุณต้องการ SVG โต้ตอบการใช้งานอย่างใดอย่างหนึ่งหรือ<iframe><object>

  • หากคุณต้องการที่จะให้เบราว์เซอร์รุ่นเก่าสามารถในการใช้ปลั๊กอิน SVG <embed>แล้วการใช้งาน

  • สำหรับ svg ใน css background-imageและคุณสมบัติที่คล้ายกันmodernizrเป็นตัวเลือกหนึ่งสำหรับการสลับไปยังรูปภาพทางเลือกอื่น ๆ ขึ้นอยู่กับหลาย ๆ แบ็คกราวด์เพื่อทำโดยอัตโนมัติ:

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

    หมายเหตุ : กลยุทธ์พื้นหลังหลายรายการไม่ทำงานบน Android 2.3 เพราะรองรับพื้นหลังหลายแบบ แต่ไม่รองรับ

การอ่านที่ดีเพิ่มเติมคือบล็อกนี้บน svg fallbacks

— Erik Dahlström
แหล่งที่มา
7
วิธีการตั้งค่าขนาดที่ถูกต้องคืออะไร ฉันจะรวมแอตทริบิวต์ความสูงและความกว้างหรือฉันจะใช้ CSS หรือไม่
— artlung
5
การใช้ css นั้นใช้งานได้ดีหรือการตั้งค่าขนาดขององค์ประกอบการฝัง (นั่นคือ: iframe, ฝัง, วัตถุ, img) - สิ่งที่หลังทำคือมันอาจหลีกเลี่ยงเนื้อหาที่ไม่มีการจัดเรียงแฟลชก่อนสไตล์ชีทที่กำหนดขนาด ถูกโหลด ตรวจสอบให้แน่ใจด้วยว่า svg มีแอตทริบิวต์ viewBox และลบแอตทริบิวต์ width / height จากองค์ประกอบราก svg นั่นจะทำให้คุณมีพฤติกรรม crossbrowser ที่ดีที่สุดในประสบการณ์ของฉัน
— Erik Dahlström
8
วิธีนี้จะดาวน์โหลดไฟล์แรสเตอร์เสมอ คำตอบนี้ช่วยให้มั่นใจได้ว่าจะมีการร้องขอทางเลือกในเบราว์เซอร์ IE ดั้งเดิมเท่านั้น
— Larry
3
โปรดทราบว่าข้างต้นไม่สามารถใช้งานได้กับ Adobe SVG Plug-in แต่คุณสามารถทำให้มันใช้งานได้ (เบราว์เซอร์สมัยใหม่ + ASV + MSIE) หากคุณเพิ่ม<param name="src" value="your.svg" />ไว้ใน<object>แท็ก ฉันใช้เวลานานมากในการพยายามหาวิธีที่จะทำและฉันคิดว่าในที่สุดฉันก็เข้าใจ
— Christopher Schultz
5
ฉันคิดว่าคนที่เร็วกว่าหยุดการสนับสนุนเบราว์เซอร์โบราณเร็วขึ้นเราจะมีสังคมที่ทำให้เบราว์เซอร์ของพวกเขาทันสมัยซึ่งแม้จะไปกับเบราว์เซอร์โดยอัตโนมัติในปี 2012 ข้อแก้ตัวเท่านั้นที่จะไม่มีการเข้าถึงเบราว์เซอร์สมัยใหม่ฟรี เช่นรองรับ Windows XP (อาจเป็นรุ่น 52) มีทางเลือกที่ทันสมัยและฟรีอยู่เสมอ
— Neonit
116

จาก IE9 ขึ้นไปคุณสามารถใช้ SVG ในแท็ก IMG ธรรมดา ..

https://caniuse.com/svg-img

<img src="/static/image.svg">
— Christian Landgren
แหล่งที่มา
35
สิ่งนี้ไม่ทำงานหาก SVG ต้องการให้โหลดทรัพยากรอื่น (แบบอักษรรูปภาพ ... )
— TheHippo
10
สำหรับโลโก้หรือไอคอนฉันยังคงแนะนำให้ใช้แท็ก IMG ด้วยเหตุผลเชิงความหมายและตรวจสอบให้แน่ใจว่า SVG เป็นเพียงภาพประกอบเวกเตอร์
— Christian Landgren
4
ตอนนี้ได้รับการยอมรับทุกที่ @artlung คุณอาจต้องการเปลี่ยนคำตอบเป็นคนนี้
— SteeveDroz
15
ใครก็ตามที่ใช้<img/>แท็กอาจต้องการทราบเกี่ยวกับการผนวกตัวระบุ Frg SVGเช่น " <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> ไม่รองรับ
— Steve O'Connor
5
@ SteveO'Connor ฉันไม่รู้บางทีมันอาจไม่ได้รับการบันทึกไว้อย่างดี แต่มันใช้ได้กับ Firefox, IE11 และ Chrome อย่างน้อยกับไฟล์ SVG ภายนอก: ฉันไม่สามารถทำงานกับ URI ข้อมูลได้
— WGH
ใช้งานได้ดี! ที่น่าสนใจคือการเพิ่มฟิลด์ 'id' นั้นเป็นสิ่งจำเป็นเมื่อคุณมีไฟล์ SVG สองไฟล์มิฉะนั้นจะมีเพียง 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'">
— Roberth Solís
แหล่งที่มา
3
น่าสนใจ แต่คุณมั่นใจได้หรือไม่ว่าonerrorไฟหาก svg ไม่แสดงผล? คุณทดสอบเบราว์เซอร์อะไรบ้าง?
— artlung
1
ใช่ฉันทดสอบบนโทรศัพท์มือถือระบบปฏิบัติการ Android, เบราว์เซอร์เริ่มต้น :)
— roberth Solís
24

ใช้ srcset

ปัจจุบันเบราว์เซอร์srcsetส่วนใหญ่รองรับคุณสมบัตินี้ซึ่งอนุญาตให้ระบุรูปภาพที่แตกต่างให้กับผู้ใช้ที่ต่างกัน ตัวอย่างเช่นคุณสามารถใช้ความหนาแน่น 1x และ 2x และเบราว์เซอร์จะเลือกไฟล์ที่ถูกต้อง

ในกรณีนี้หากคุณระบุ SVG ในsrcsetและเบราว์เซอร์ไม่รองรับมันก็จะย้อนsrcกลับไปที่

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

วิธีนี้มีประโยชน์หลายอย่างเหนือกว่าโซลูชันอื่น ๆ :

  1. มันไม่ได้อาศัยแฮ็กหรือสคริปต์แปลก ๆ
  2. มันง่ายมาก
  3. คุณยังสามารถรวมข้อความแสดงแทนได้
  4. เบราว์เซอร์ที่รองรับsrcsetควรทราบวิธีจัดการเพื่อดาวน์โหลดไฟล์ที่ต้องการเท่านั้น
— Scribblemacher
แหล่งที่มา
5
ทำไมต้องกังวลว่ามีโอกาส> 99% ที่เบราว์เซอร์ใด ๆ ที่สนับสนุน SVG ในวันนี้
— Robert Longson
5
ส่วนหนึ่งจากการทำให้ทุกคนสามารถดูหน้าได้อย่างถูกต้อง Google จะรักคุณมากขึ้น!
— Hoots
2
ดูดีกว่าที่ระบุไว้ ณ เวลาปัจจุบันที่คุณกดรูปสำรองไปยังผู้ใช้ประมาณ 10%
— Volker E.
2
@VolkerE 10%? แสดง caniuse ขาดการสนับสนุน SVG ประมาณ 2% ฉันยังคงใช้ srcset เหมือนในคำตอบแม้ว่าจะรองรับ 2% ในอนาคตฉันหวังว่าเบราว์เซอร์จะสามารถใช้ข้อมูลเช่น srcset และเลือกภาพที่เหมาะสมตามปัจจัยเช่นประสิทธิภาพและขนาดไม่ใช่แค่ขนาดของอุปกรณ์หรือการรองรับรูปแบบไฟล์
— Scribblemacher
3
ปัญหาเฉพาะของการแก้ไขนี้คือเมื่อเบราว์เซอร์รองรับ SVG แต่ไม่ใช่ srcset เช่น IE11 ซึ่งเป็นค่าเริ่มต้นกลับเป็น PNG แม้ว่าจะรองรับ SVG
— Hego555
16

หากคุณต้องการให้แผนกบริการลูกค้าของคุณมีสไตล์ที่สมบูรณ์แบบด้วย CSS พวกเขาจะต้องเป็นแบบอินไลน์ใน DOM สามารถทำได้ผ่านการฉีด SVG ซึ่งใช้ Javascript เพื่อแทนที่องค์ประกอบ HTML (โดยปกติจะเป็น<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)จะทำให้เกิดการฉีดและ<img>องค์ประกอบจะถูกแทนที่ด้วยเนื้อหาของไฟล์ที่ให้ไว้ในsrcแอตทริบิวต์ สิ่งนี้ใช้ได้กับเบราว์เซอร์ทั้งหมดที่รองรับ SVG

คำเตือน: ฉันเป็นผู้เขียนร่วมของ SVGInject

— Waruyama
แหล่งที่มา
15

ฉันจะใช้<svg>แท็กเป็นการส่วนตัวเพราะหากคุณควบคุมได้เต็มที่ ถ้าคุณใช้มันในตัว<img>คุณคุณจะไม่ได้รับการควบคุมอวัยวะภายในของ SVG ด้วย CSS เป็นต้น

อีกสิ่งหนึ่งคือการสนับสนุนเบราว์เซอร์

เพียงแค่เปิด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>แท็กแล้วเบราว์เซอร์ WebKit ตามจะไม่แสดงฝังภาพบิตแมป

สำหรับการใช้งาน SVG ขั้นสูงทุกชนิดรวมถึงข้อเสนอแบบอินไลน์ SVG ด้วยความยืดหยุ่นสูงสุด

Internet Explorer และ Edge จะปรับขนาด SVG ให้ถูกต้องแต่คุณต้องระบุทั้งความสูงและความกว้าง

คุณสามารถเพิ่มonclick, onmouseover และอื่น ๆภายใน svg ให้กับรูปร่างใด ๆ ใน SVG: onmouseover = "top.myfunction (evt);"

คุณยังสามารถใช้เว็บฟอนต์ใน SVG โดยรวมไว้ในสไตล์ชีทปกติของคุณ

หมายเหตุ: หากคุณกำลังส่งออก SVG จาก Illustrator ชื่อแบบอักษรของเว็บจะผิด คุณสามารถแก้ไขสิ่งนี้ใน 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 - และหากคุณมีช่วงการเปลี่ยนภาพจำนวนมากจากข้อความธรรมดาเป็นตัวหนาหรือตัวเอียงอาจมีพื้นที่พิเศษหรือขาดหายไปเล็กน้อยที่จุดเปลี่ยน ดูคำตอบของฉันที่คำถามนี้สำหรับข้อมูลเพิ่มเติม

— Andrew Swift
แหล่งที่มา
ขอบคุณ. ใช้เวลาเพียง 3 ชั่วโมงในการดึงผมออกมาลองคิดดูว่าทำไมภาพแรสเตอร์ถึงไม่ปรากฏในimgแท็กของฉัน... คุณรู้หรือไม่ว่านี่เป็นเอกสารอย่างเป็นทางการทุกที่?
— ryebread
@Andrew Swift คุณได้รับผลภาพที่ดีมากในdev.ozake.comแต่มีปัญหาการเข้าถึงที่ร้ายแรง: เครื่องมือค้นหาอาจมีการทำดัชนีเว็บไซต์ยาก (ฉันไม่แน่ใจว่าพวกเขาจะรับลิงก์ที่ซ่อนอยู่ภายในกิจกรรม SVG) ; ไซต์ไม่สามารถนำทางด้วยคีย์บอร์ด ดูเหมือนว่าโปรแกรมอ่านหน้าจอจะทำให้หายใจไม่ออก ...
— ระหว่าง
11

สองเซ็นต์ของฉัน: ตั้งแต่ 2019, 93% ของเบราว์เซอร์ที่ใช้งานอยู่ (และ 100% ของสองเวอร์ชันสุดท้ายของทุก ๆ เวอร์ชัน) สามารถจัดการ SVG ใน<img>องค์ประกอบ:

ป้อนคำอธิบายรูปภาพที่นี่

ที่มา: ฉันสามารถใช้

ดังนั้นเราจึงสามารถพูดได้ว่าไม่มีเหตุผลที่จะใช้<object>อีกต่อไป

อย่างไรก็ตามมันยังคงมีข้อดี :

  • เมื่อตรวจสอบ (เช่นด้วยเครื่องมือของ Chrome Dev) คุณจะได้รับการแสดงเครื่องหมาย SVG ทั้งหมดในกรณีที่คุณต้องการแก้ไขเล็กน้อยและดูการเปลี่ยนแปลงสด

  • มันมีการนำไปใช้ทางเลือกที่มีประสิทธิภาพมากในกรณีที่เบราว์เซอร์ของคุณไม่รองรับ SVG (รอ แต่ทุกตัวทำ!) ซึ่งจะทำงานหากไม่พบ SVG นี่เป็นคุณสมบัติที่สำคัญของ XHTML2 spec ซึ่งก็เหมือนกับ betamax หรือ HD-DVD

แต่ก็มีข้อเสีย :

  • ไม่มีคู่แอมป์ไป<object>(สรรพสินค้าใหญ่มันปลอดภัยที่สมบูรณ์แบบที่จะใช้กับและใช้งานได้แบบอินไลน์เกินไป<amp-img>
  • คุณไม่ควรผสม handlerworker ดึง handler กับการฝังใด ๆดังนั้นการมี<object>แท็กอาจทำให้ PWA ของคุณไม่สามารถออฟไลน์ได้
— ffflabs
แหล่งที่มา
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 พิเศษด้วยสไตล์ทางเลือก

รายละเอียดเพิ่มเติมและขั้นตอนการทดสอบคุณจะพบในบล็อกของฉัน

— Artru
แหล่งที่มา
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">
ขยายตัวอย่างข้อมูล

— Andres Separ
แหล่งที่มา
-1

ฉันแนะนำให้ใช้การรวมกันของ

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
— Grv97
แหล่งที่มา
คุณสามารถอธิบายอย่างละเอียดว่าทำไมคุณถึงใช้การตั้งค่าเหล่านี้และทำไมมันถึงแตกต่างจากคำตอบอื่น ๆ
— kvantour
-1

คุณสามารถแทรก SVG ทางอ้อมโดยใช้ <img>แท็ก HTML และสามารถทำได้ใน StackOverflow ตามที่อธิบายไว้ด้านล่าง:

ฉันมีไฟล์ 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

ฉันมีแล้วด้วยตนเอง (โดยไม่ใช้ไอคอน IMAGE) เพิ่มแท็กต่อไปนี้

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

และผลลัพธ์อยู่ด้านล่าง

สำหรับผู้ใช้ที่มีข้อสงสัยมันเป็นไปได้ที่จะเห็นสิ่งที่ฉันทำในการแก้ไขคำตอบต่อไปนี้ใน StackOverflow การแทรกอิมเมจ SVG

หมายเหตุ -1: ไฟล์ SVG จะต้องมี<?xml?>องค์ประกอบ ตอนเริ่มต้นฉันเพิ่งสร้างไฟล์ SVG ที่เริ่มต้นด้วย<svg>แท็กโดยตรงและไม่มีอะไรทำงาน!

REMARK-2: ตอนเริ่มต้นฉันพยายามจะแทรกรูปภาพโดยใช้ IMAGEEdit Toolbarไอคอน ฉันวาง URL ของไฟล์ SVG ของฉัน แต่ StackOverflow ไม่ยอมรับวิธีนี้ <img>แท็กจะต้องเพิ่มด้วยตนเอง

ฉันหวังว่าคำตอบนี้จะช่วยผู้ใช้รายอื่น

— schlebe
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.