Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Matheus Scherer
Matheus Scherer
1,802 Points
Posted by Matheus Scherer
Matheus Scherer
1,802 Points

SVG dimensions

Hello, when using SVG files, is there any difference of exporting from a larger or smaller artboard?

Example: Export a 1000x1000px file as SVG and using it as a 20x20px or Export a 20x20px file as SVG and using it as a 1000x1000px

I know that SVG is a vector and will be visually the same, but is there any technical differences? Like load time, or file size?

Thanks

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Matheus,

If you do export at 1000x1000px then yes there will be a considerable difference in file size because a lot more math will be involved in the XML output, for the best performance it's always recommended you only save your SVG files out at the maximum size you need them which generally you wouldn't expect them to be any larger than 1000px but you also need to take into account that browsers put load on your systems GPU to render out the vector graphic which can take a toll on the overall websites performance if you're animating it for instance.

My personal choice is never to go any wider than 600px and any higher than 400px, but that's just me.