Characteristics and behaviors of SVG files in Web Browsers
The purpose of this section is to show how SVG files vary in behavior when the characteriscics of the Adobe Illustrator export are changed.
On each SVG I’ve placed a border around it to show boundry of the viewbox area and a border around the HTML containing box it resides in. The top images are centered in the section, no columns. The two images below the first are in columns of two different sized boxes of 2/3rds and 1/3rd.
Illustrator File Specs:
1000px X 1000px
Horizontal / Vertical Centered
Using Lines : 72.061 px Stroke
(Was 72 px, Illustrator altered them on centering)
Rounded Caps
This is my prefered method of Abobe Illustrator SVG export, without minification. If you have a large, very graphical SVG export then minification will make it smaller and is therefore prefered. But I like to be able to edit SVG files directly if needed and minification is dificult to read. It’s up to you though.
Adobe Illustrator SVG Export.
Artboard, Non-responsive, Non-minified
2/3 Column
1/3 Column
The only change is “minification” being added, which does not change the behavior of the SVG
Adobe Illustrator SVG Export.
Artboard, Non-responsive, Minified
2/3 Column
1/3 Column
Why does the first image shrink up like this? It has no width and height in the SVG so it gets squished from the other boxes in the section box. The images below are expanding to the size of the box they are in; That’s all the space the browser sees as available for that block. If I added another column then they would get smaller or larger depending on the width of the column.
When exported this way, the artboard size becomes the viewbox size. There is no width and height in the SVG.
Adobe Illustrator SVG Export.
Artboard, Responsive, Non-minified
2/3 Column
1/3 Column
50% – 25% – 15% – 10%
Artboard, Responsive, Non-minified
Artboard, Responsive, Non-minified
Artboard, Responsive, Non-minified
Artboard, Responsive, Non-minified
Notice the boundry of the image where there is a border around it. Why is there extra padding on the bottom and right of the SVG file? I don’t know; It has magic numbers put into it from Adobe Illustrator and I just can’t make sense of it. Why does it do that? I’m totally open to have your comments on this issue.
Adobe Illustrator SVG Export.
No Artboard, Responsive, Non-minified
2/3 Column
1/3 Column
Same here, but this one is non-responsive in addition to no artboard. Notice the boundry of the image where ther is a border around it. Why is there extra padding on the bottom of the SVG file? Adobe Illustrator magic numbers again.
Adobe Illustrator SVG Export.
No Artboard, Non-responsive, Non-minified
2/3 Column
1/3 Column
Same here, but this one I edited the viewbox numbers and is also non-responsive in addition to no artboard.
Adobe Illustrator SVG Export.
No Artboard, Responsive Edited, Non-minified
2/3 Column
1/3 Column