Mobile app version of vmapp.org
Login or Join
Jessie844

: Is there any concept of size in an SVG? I was wondering about SVG files. I know it's a collection of vectors defined by path tags in XML, thus why does it have a width and height in pixels

@Jessie844

Posted in: #Svg

I was wondering about SVG files. I know it's a collection of vectors defined by path tags in XML, thus why does it have a width and height in pixels in the svg tag and what if we removed those dimensions?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Jessie844

1 Comments

Sorted by latest first Latest Oldest Best

 

@Heady304

Width and height are only relevant when viewBox is set. Without that attribute you can safely delete width and height. It'll always display at the scale it was drawn at. If a <rect> was set 10px wide 20px high it'll display at that scale 10x20 with or without width or hight when no viewBox is set.

If a viewBox attribute is set you can use the width and height to adjust the original scale up or down.

Without width and height but viewBox set, this will allow the svg to scale infinitely, which may or may not be desired behaviour. In a responsive HTML page this is often desired. It'll scale up or down to fit the bounding container.

These are the same

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">


This doubles the original scale.

<svg viewBox="0 0 120 120" width="240" height="240"
xmlns="http://www.w3.org/2000/svg">


This allows infinite scaling

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme