Why do we use SVG (Scalable Vector Graphics), and how do we export SVG from Penpot?
01:17 min
Learn about the benefits of using SVG (Scalable Vector Graphics) for UI design and how to export SVG files from Penpot.
01:17 min
01:17 min
Transcript
01:17 min
I remember a time before we could use SVG on the web and it was a sad time.
Vector graphics
SVG or Scalable Vector Graphics is a fantastic vector file format for icons, logos, and simple illustrations. The benefits are in the name because the graphic is made up of vector paths, it is infinitely scalable, which means you can render a massive image with crisp lines while keeping the file size small.
SVG is an open standard file format, which means that even if you create it in Penpot, you can open and edit the file in many other tools, including a code editor.
Exporting SVG files from Penpot
You can export your boards as SVG files from the end of Penpot's design panel. Save each icon or logo on its own board as a separate SVG file to make them easy to use and be aware of the white space around the graphic detail in your file.
Do you want to ensure there's always the same amount of space around the graphic? Then include it in your board. As a general rule, try to keep your file simple without too many details. Very detailed sVG files can have unexpectedly large file sizes.
Resources
01:17 min
You can read more about exporting objects and boards in the Penpot User Guide.
The demo file features the example from the video on SVGs. Download the .penpot file and import the file into Penpot to try it out for yourself.