Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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,650 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.