Exporting shapes and drawings

The export menu
The export menu

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:

Available options for export sizes
Available options for export sizes
  • 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.

Choose transparent or opaque (white) background when exporting PNG
Choose transparent or opaque (white) background when exporting PNG

Exporting as PDF

For PDF, options are provided to export a single page or all pages. Resolution for PDF is by default 300 DPI.

The Export PDF dialog
The Export PDF dialog

Exporting as DXF/DWG

To export DXF/DWG file:

  • Click on export menu, and select Export as DXF/DWG

Exporting as SVG

The Export svg dialog
The Export svg dialog

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 totags or move the elements to other groups.

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.

vecta.io BETA