Export

Piko exports artwork on a per-object basis. You configure export settings directly on individual objects in the Properties panel, and each object can have multiple export configurations so you can generate several variants at once. This guide covers every supported format, how to set up exports, filename conventions, and format-specific details.

Supported formats

PNG

Best for: Web graphics, UI assets, anything that needs transparency.

Rasterized output with full alpha-channel support. Universal compatibility across every platform and browser.

JPEG

Best for: Photos and images where transparency is not needed.

Rasterized output with no transparency — transparent areas are filled with white. Smaller file sizes at the cost of lossy compression.

WebP

Best for: Modern web graphics where file size matters.

Rasterized output with transparency support. Produces significantly smaller files than PNG at comparable quality.

SVG

Best for: Logos, icons, illustrations — anything that needs to scale without quality loss.

True vector output. Shapes, text, and gradients are preserved as scalable vector markup. Bitmaps are embedded as base64 data URLs.

PDF

Best for: Print-ready output and document sharing.

Page size matches the object dimensions. Supports solid fills and strokes. Text is rendered with the Helvetica font. No gradient support.

Format comparison

Format	Transparency	Vector	Notes
PNG	Yes	Rasterized	Best for web graphics
JPEG	No (white background)	Rasterized	White fill replaces transparent areas
WebP	Yes	Rasterized	Modern format, smaller files
SVG	Yes	Yes	Lossless scaling, full vector support
PDF	Yes	Partially	Uses Helvetica for text, no gradient support

Setting up export on an object

Export settings are configured per-object in the Properties panel. A single object can have multiple export configurations, and all of them are exported at once when you trigger the export.

1. Select the object you want to export on the canvas.
2. In the Properties panel, locate the Export section.
3. Click Add Export Setting to create a new export configuration.
4. Choose the Format: PNG, JPEG, WebP, SVG, or PDF.
5. Set the Scale: 0.5x, 1x, 2x, 3x, or 4x.
6. For JPEG and WebP, adjust the Quality slider (0 to 1).
7. Optionally add a Suffix to customize the filename (e.g., @2x, -dark, -thumb).
8. To export at multiple sizes or formats, click Add Export Setting again and repeat.

Tip

Adding multiple export settings to a single object is a fast way to generate all the variants you need. For example, add a 1x PNG, a 2x PNG, and an SVG export setting to a single icon object and export them all at once.

Caution

The maximum output dimension is 8192 pixels on any side. If a scale setting would produce an image larger than this, the export will be clamped to 8192px.

Export settings reference

Setting	Values	Description
Format	PNG, JPEG, WebP, SVG, PDF	The output file format
Scale	0.5x, 1x, 2x, 3x, 4x	Multiplier applied to the object’s dimensions (max 8192px)
Quality	0–1	Compression quality for JPEG and WebP only
Suffix	Any string	Custom text appended to the filename (e.g., @2x)

Triggering an export

Once you have configured export settings on an object, select it and press Ctrl + Shift + E to export. Piko generates all configured export variants for the selected object and downloads them.

Filename conventions

Exported files follow a consistent naming pattern:

{sanitized-object-name}{suffix}.{extension}

The sanitization rules are:

• Non-alphanumeric characters (except - and _) are replaced with hyphens.
• Multiple consecutive hyphens are collapsed into a single hyphen.
• Scale suffixes are added automatically: @2x, @3x, @4x (omitted for 1x and 0.5x uses @0.5x).

Examples:

Object name	Scale	Suffix	Output filename
App Icon	1x	(none)	app-icon.png
App Icon	2x	(none)	app-icon@2x.png
Header / Logo	3x	(none)	header-logo@3x.png
nav_button	1x	-dark	nav_button-dark.png

SVG export details

SVG export produces true vector output whenever possible. Here is how different elements are handled:

• Vector shapes — Rectangles, circles, ellipses, and paths are exported as native SVG elements (<rect>, <circle>, <ellipse>, <path>).
• Gradients — Linear and radial gradients are fully supported. Angular and diamond gradients fall back to the first color stop as a solid fill.
• Effects — Visual effects (blur, shadow, etc.) are exported as SVG filter elements.
• Text — Preserved as <text> elements in the SVG markup.
• Bitmaps — Raster images and brush strokes are embedded as base64-encoded PNG data URLs.
• Boolean groups — Exported using fill-rule="evenodd" to produce the correct compound shape.

Tip

For the smallest SVG file sizes, keep your design vector-based. Embedded bitmaps can significantly increase file size since they are encoded as base64 data.

PDF export details

PDF export creates a document whose page size matches the dimensions of the exported object. Key details:

• Solid fills and strokes only — gradients are not supported in PDF output.
• Text — Rendered using the Helvetica font regardless of the font used in your design.
• Bitmaps — Raster content is embedded as PNG data within the PDF.
• Coordinate system — Piko automatically flips the Y-axis to match the PDF coordinate system (origin at bottom-left).

Note

Because PDF export substitutes Helvetica for all text, your text layout may shift slightly if you are using a font with significantly different metrics. Preview the output before distributing.

Quick reference

Action	Shortcut
Export selected object	Ctrl + Shift + E

Format	Transparency	Vector	Quality setting
PNG	Yes	No	N/A
JPEG	No	No	0–1
WebP	Yes	No	0–1
SVG	Yes	Yes	N/A
PDF	Yes	Partial	N/A

For the complete shortcut list, see the Keyboard Shortcuts reference.