Exporting shapes and drawings
Exporting shapes
To export a selection of shapes:
- Select the shapes you wanted to export
- Click on Export menu, and choose your desired format
Exporting the entire drawing
- Click on anywhere on the drawing to ensure no shapes are selected
- Click on Export menu, and choose your desired format
Exporting as JPG
When exporting to JPG, you can choose export sizing:
- 96 dpi (Recommended) - For web images
- 180 dpi - For regular prints
- 360 dpi - For high resolution prints
- @1X - For images with 1 to 1 pixel ratio
- @2X - For images with 2 to 1 pixel ratio and higher resolution screens
- @3X - For images with 3 to 1 pixel ratio and 4K screens
- @4X - For images with 4 to 1 pixel ratio and above 4K screens
Exporting as PNG
For PNG, in addition to selecting export sizing as described above, you can also select a transparent or opaque (white) background.
Exporting as PDF
For PDF, options are provided to export a single page or all pages. Resolution for PDF is by default 300 DPI.
Exporting as DXF/DWG
To export DXF/DWG file:
- Click on export menu, and select Export as DXF/DWG
Exporting as SVG
Precision
Higher precision values tend to enlarge exported SVG file size, while lower precision values will have smaller SVG file sizes. The default value of 2 decimal precision will work for most cases, while offering good file sizes.
Remove CDATA
Remove CDATA only when you wanted to format your SVG with your own formatting, otherwise leave this option unchecked.
Prettify
Choose prettify to format your SVG codes to be more human readable.
Optimize SVG
Optimize SVG uses Nano's compression engine to drastically reduce file size and embed fonts into your SVG, to ensure they display correctly no matter where they are embedded. But the optimization will remove any custom data in the drawings.
Optimizing your SVG can result in up to 80% bandwidth savings, and is most suitable for embedding in websites.
Optimization mode
Image mode is the default optimization mode. The optimized SVG can be used in HTML embedding using <img> tag. Browser caching is available for the SVG image for faster page loading.
If interactivity is required, Object mode might be the best option. The optimized SVG can be used in HTML using <object> tag. Thus it will not be available in image search. Fonts are also not embedded in this mode, but the optimized SVG can be cached in browser for faster page loading.
Inline mode embeds all the SVG codes inside your HTML, thus making the SVG load faster. However, inline mode will not embed fonts, and all IDs will be randomized to ensure that they are unique across the HTML.
Embed fonts
This option, when checked, enables web fonts to be embedded in the SVG to ensure that the font does not resort to using system fonts. This option is only available when Image mode is chosen as the optimization mode.
Maintain ID
This option, when checked, maintains the original IDs throughout the SVG codes. Thus the IDs will not be randomized.
Maintain Classes
The Maintain classes option maintains the original classes throughout the SVG codes. Hence, the classes will not be randomized.
Maintain Structure
This option optimizes the SVG without changing the structure. For instance, it does not reduce the SVG elements to
Maintain Events
The Maintain events option maintains all events in the SVG such as onclick, onmouseover, onmouseleave, and other events.
Copy to clipboard button
Click on Copy to clipboard to copy your SVG codes to the clipboard.
Download button
Click Download to download the exported SVG.
