ปรับขนาด SVG

ขนาดการแสดงผลเทียบกับ viewBox

SVG มีขนาดการแสดงผล (width/height) และระบบพิกัดของตัวเอง (viewBox)

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

SVG นี้มีขนาด 200 × 200 พิกเซลบนหน้าจอ ในขณะที่พิกัดภายในของมันไล่จาก 0 ถึง 100 วงกลมที่ r="40" เติมพื้นที่ราว 80% ของ viewBox จึงแสดงผลกว้างประมาณ 160 px เครื่องมือนี้เปลี่ยนเฉพาะ width และ height ซึ่งก็คือขนาดการแสดงผลที่ประกาศไว้ มันไม่แตะต้อง viewBox หรือพิกัด และนั่นคือเหตุผลที่ภาพวาดรักษาสัดส่วนและยังคมชัด คุณกำลังบอกให้เบราว์เซอร์วาดภาพเดิมที่ขนาดต่างออกไป ไม่ใช่วาดใหม่

ทำไม SVG จึงอาจดูเหมือนเดิมหลังจากคุณเปลี่ยนขนาด

หาก SVG ถูกวางด้วยอะไรทำนอง <img src="icon.svg" width="500"> หรือกำหนดขนาดด้วย CSS หน้าเว็บที่ห่อหุ้มอยู่จะเป็นตัวควบคุมขนาดการแสดงผลและลบล้าง width/height ในไฟล์ ในกรณีนั้นให้เปลี่ยนขนาด ณ ที่ที่ใช้ SVG (ที่ <img> ที่ CSS หรือที่คอนเทนเนอร์) ไม่ใช่แค่ภายในมาร์กอัป

เส้นและตัวอักษรยังคมชัด

เพราะไม่มีสิ่งใดถูกแปลงเป็นแรสเตอร์ ตัวอักษรจึงยังเป็นข้อความเวกเตอร์จริง และเส้นยังเรียบลื่นที่ทุกขนาด ความหนาของเส้นถูกนิยามในระบบพิกัด จึงย่อขยายไปพร้อมกับภาพวาด หากคุณต้องการให้เส้นคงความหนาที่มองเห็นเท่าเดิมไม่ว่าขนาดใด ให้เพิ่ม vector-effect="non-scaling-stroke" ลงในองค์ประกอบนั้นในไฟล์ต้นทางก่อนปรับขนาด

รักษามาร์กอัปให้สะอาด

SVG ที่ส่งออกจาก Figma, Illustrator หรือ Sketch มักพกน้ำหนักส่วนเกิน เช่น เนมสเปซของโปรแกรมแก้ไข (sodipodi:, inkscape:), เมทาดาทาที่ซ่อนอยู่ และ <defs> ที่ไม่ได้ใช้ เครื่องมือนี้ปล่อยมาร์กอัปของคุณไว้ตามเดิมยกเว้นเรื่องขนาด หากต้องการตัดส่วนเกินออก ให้ส่งไฟล์ผ่านตัวปรับให้เหมาะสมอย่าง SVGO ก่อนหรือหลังการปรับขนาด