ปรับขนาด SVG เป็น html

ดังนั้นฉันมีไฟล์ SVG ใน HTML และหนึ่งในสิ่งที่ฉันได้ยินเกี่ยวกับรูปแบบคือมันไม่ได้รับพิกเซลทั้งหมดเมื่อคุณซูมเข้า

ฉันรู้ด้วย jpeg หรืออะไรก็ตามที่ฉันสามารถเก็บไว้เป็นไอคอน 50 x 50 แล้วจริง ๆ แล้วแสดงเป็นภาพขนาดย่อ (เป็นพิกเซล) 100 100 ภาพ (หรือ 10 10) โดยการตั้งค่าความสูงและความกว้างใน image_src ด้วยตนเอง แท็ก

อย่างไรก็ตามไฟล์ SVG ดูเหมือนจะใช้กับแท็ก object / embed และการเปลี่ยนความสูงหรือความกว้างของ THOSE จะส่งผลให้มีการจัดสรรพื้นที่เพิ่มเติมสำหรับรูปภาพ

มีวิธีใดที่จะระบุว่าคุณต้องการให้ภาพ SVG แสดงเล็กลงหรือใหญ่กว่าที่จัดเก็บจริงในระบบไฟล์หรือไม่?

เปิด.svgไฟล์ของคุณด้วยโปรแกรมแก้ไขข้อความ (เป็นเพียง XML) และมองหาสิ่งนี้ที่ด้านบน:

<svg ... width="50px" height="50px"...

ลบแอตทริบิวต์ความกว้างและความสูง ค่าเริ่มต้นคือ 100% ดังนั้นจึงควรขยายไปยังคอนเทนเนอร์ที่อนุญาต

ลองเหล่านี้:

1. ตั้งค่าช่องมองภาพที่ขาดหายไปและเติมค่าความสูงและความกว้างของแอตทริบิวต์ความสูงและความสูงที่ตั้งไว้ในแท็ก svg

2. จากนั้นปรับขนาดภาพโดยการตั้งค่าความสูงและความกว้างเป็นค่าร้อยละที่ต้องการ โชคดี.

3. ตั้งค่าอัตราส่วนภาพคงที่ด้วยpreserveAspectRatio="X200Y200 meet(เช่น 200px) แต่ไม่จำเป็น

เช่น

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

คุณสามารถปรับขนาดได้โดยการแสดง svg ในแท็กภาพและแท็กภาพขนาดเช่น

<img width="200px" src="lion.svg"></img>

การเปลี่ยนความกว้างของคอนเทนเนอร์ยังแก้ไขได้แทนที่จะเปลี่ยนความกว้างและความสูงของไฟล์ต้นฉบับ

.SvgImage img{ width:80%; }

สิ่งนี้จะแก้ไขปัญหาของฉันในการปรับขนาด svg คุณสามารถให้% ใด ๆ ตามความต้องการของคุณ

ฉันพบว่าการเพิ่มviewBoxและpreserveAspectRatioคุณลักษณะให้กับ SVG ของฉันนั้นดีที่สุด ช่องมองภาพควรอธิบายความกว้างและความสูงของ SVG ในรูปแบบ0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

ใช้รหัสต่อไปนี้:

<g transform="scale(0.1)">
...
</g>

นี่คือตัวอย่างของการรับขอบเขตโดยใช้svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

ในตอนท้ายคุณจะได้รับหมายเลขที่คุณสามารถเสียบเข้ากับ svg เพื่อตั้งค่าช่องมองภาพได้อย่างเหมาะสม จากนั้นใช้ css ใด ๆ บน div parent แล้วเสร็จ

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

ฉันมีไฟล์ SVG ในรูปแบบ HTML [.... ] มีวิธีใดที่จะระบุว่าคุณต้องการให้ภาพ SVG แสดงเล็กลงหรือใหญ่กว่าที่จัดเก็บจริงในระบบไฟล์หรือไม่?

กราฟิก SVG เช่นเดียวกับงานสร้างสรรค์อื่น ๆ ได้รับการคุ้มครองภายใต้กฎหมายลิขสิทธิ์ในประเทศส่วนใหญ่ ขึ้นอยู่กับเขตอำนาจอนุญาตงานหรือไม่ว่าคุณจะเป็นผู้ถือลิขสิทธิ์หรือไม่คุณอาจไม่สามารถแก้ไข SVG ได้โดยไม่ละเมิดกฎหมายลิขสิทธิ์เชื่อหรือไม่

แต่กฎหมายเป็นหัวข้อที่ยุ่งยากและบางครั้งคุณแค่ต้องการทำเรื่องไร้สาระ ดังนั้นคุณสามารถปรับขนาดของกราฟิกได้โดยไม่ต้องแก้ไขงานเองโดยใช้imgแท็กที่มีwidthแอตทริบิวต์ใน HTML ของคุณ

การใช้คำร้องขอ HTTP ภายนอกเพื่อระบุขนาด:

<img width="96" src="/path/to/image.svg">

การระบุขนาดในมาร์กอัพโดยใช้Data URI :

<img width="96" src="data:image/svg+xml,...">

SVGสามารถปรับให้เหมาะสมสำหรับ Data URIsเพื่อสร้างภาพ SVG Faviconที่เหมาะกับขนาดใดก็ได้:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">