ภาพ SVG เป็นภาพเวกเตอร์ล้วนๆหรือเราสามารถรวมภาพบิตแมปเป็นภาพ SVG ได้หรือไม่? วิธีการเกี่ยวกับการแปลงที่นำไปใช้กับภาพบิตแมป (เปอร์สเปคทีฟแมป ฯลฯ )
แก้ไข : รูปภาพอาจรวมอยู่ใน SVG โดยอ้างอิงลิงก์ ดูhttp://www.w3.org/TR/SVG/struct.html#ImageElement คำถามของฉันเป็นจริงหากภาพบิตแมปอาจรวมอยู่ใน svg เพื่อให้ภาพ svg จะมีอยู่ในตัวเอง มิฉะนั้นเมื่อใดก็ตามที่ภาพ svg ปรากฏขึ้นจะต้องมีการเชื่อมโยงและภาพที่ดาวน์โหลด Apparently .svg files เป็นเพียงไฟล์ xml
คำตอบ:
ใช่คุณสามารถอ้างอิงภาพใด ๆ จาก<image>องค์ประกอบ และคุณสามารถใช้data uri'sเพื่อทำให้ svg มีการควบคุมตัวเองได้อย่างเต็มที่ ตัวอย่าง:
<image width="100" height="100" xlink:href="data:image/png;base64,...">จุดต่างๆเป็นที่ที่คุณจะเพิ่มข้อมูล base64 ที่เข้ารหัสซึ่งเป็นตัวแก้ไขกราฟิกแบบเวกเตอร์ที่สนับสนุน svg มักจะมีตัวเลือกสำหรับการบันทึกด้วยภาพที่ฝังอยู่ มิฉะนั้นจะมีเครื่องมือมากมายสำหรับการเข้ารหัสไปยังและจาก base64
นี่คือตัวอย่างเต็มรูปแบบจากการทดสอบ SVG
xlinkตามที่เป็นอยู่: xmlns:xlink="http://www.w3.org/1999/xlink"เบราว์เซอร์ / ผู้ดูบางรายอาจไม่เห็นภาพของคุณหากไม่มีมัน
widthและheightในแท็กภาพ svg อย่างไรก็ตาม Firefox และ IE จะไม่แสดงภาพหากคุณไม่ใช้แอททริบิวเหล่านี้ ดังนั้นให้แน่ใจว่าคุณระบุพวกเขา!
ฉันโพสต์ซอที่นี่แสดงข้อมูลภาพระยะไกลและท้องถิ่นที่ฝังอยู่ใน SVG ภายในหน้า HTML:
<!DOCTYPE html>
<html>
<head>
<title>SVG embedded bitmaps in HTML</title>
<style>
body{
background-color:#999;
color:#666;
padding:10px;
}
h1{
font-weight:normal;
font-size:24px;
margin-top:20px;
color:#000;
}
h2{
font-weight:normal;
font-size:20px;
margin-top:20px;
}
p{
color:#FFF;
}
svg{
margin:20px;
display:block;
height:100px;
}
</style>
</head>
<body>
<h1>SVG embedded bitmaps in HTML</h1>
<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>
<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>
<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>
<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>
</body>
</html>คุณสามารถใช้Data URIเพื่อจัดหาข้อมูลรูปภาพตัวอย่างเช่น
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>ภาพจะผ่านการแปลง svg ปกติทั้งหมด
แต่เทคนิคนี้มีข้อเสียตัวอย่างเช่นรูปภาพจะไม่ถูกแคชโดยเบราว์เซอร์
คุณสามารถใช้data:URLเพื่อฝังรูปภาพที่เข้ารหัส Base64 แต่มันไม่มีประสิทธิภาพมากและไม่แนะนำให้ฝังภาพขนาดใหญ่ มีเหตุผลเชื่อมโยงไปยังไฟล์อื่นไม่ได้?
นอกจากนี้ยังเป็นไปได้ที่จะรวมบิตแมป ฉันคิดว่าคุณยังสามารถใช้การแปลงกับที่