Skip to main content

Images, SVG and export

An image is always a fill on a layer; there is no image layer type. This page lists formats and limits, what an image or an SVG becomes depending on how it arrives, and what export writes. Also called: bitmaps, assets.

Image formats and limits​

Image fills accept PNG, JPEG, WebP and SVG files. GIF and every other format are not accepted: a drop on the canvas without a supported file shows Dropped files did not include any supported image types.

note

An image whose longer side is over 4000 px is scaled down to 4000 px. The scaled copy is re-encoded: PNG and SVG files become PNG, JPEG and WebP files become JPEG at 75% quality, so a large WebP loses its transparency. One upload can be at most 40 MB. An SVG converted to layers is scaled down to fit 3000 × 3000 px.

Getting images in​

Where: drop files on the canvas, paste them with Ctrl + V, or Properties panel → Fill → open a fill → type Image → the upload button (tooltip Upload image).

  • A dropped or pasted bitmap becomes a rectangle named after the file, at the image's pixel size, with the image as a Fit fill.
  • A drop lands in the frame under the pointer: in a Flex frame at that position, in a Grid frame in that cell. A paste follows Where a paste lands.
  • One bitmap pasted while only shapes or vector layers are selected replaces all their fills instead. A drop always creates a layer.

Cropping​

Where: in the fill's image settings, the crop button next to the fitting dropdown (tooltip Adjust image crop) → Crop image dialog.

  • Reset sets the rectangle back to the whole image, within the selected aspect ratio. The layer changes only on Done; closing the dialog discards the change.
  • SVG image fills can't be cropped: the button is disabled (tooltip Crop unavailable for SVG images).
  • Uploading a new image into the fill clears the crop. The crop applies on the canvas, in preview and in every export.

SVG​

  • Dropped on the canvas or pasted, an SVG file is converted into editable layers inside a frame named after the file. So is pasted SVG source text that starts with <svg and ends with </svg>.
  • Chosen with the upload button of a fill (tooltip Upload image), it stays an image fill.
The conversionElements and attributes
Convertssvg and g to frames; path, polygon, polyline to vector layers; rect to a rectangle; circle, ellipse to an oval; line to a line. Fill, stroke and their opacity, stroke width and blend mode, from attributes and style rules; the transform attribute. linearGradient, radialGradient. In a filter: feGaussianBlur as Blur, feDropShadow as Drop Shadow.
Ignorestext, image, use, symbol, clipPath, mask, pattern; the corner radii rx and ry of a rect.

Export​

Where: Properties panel → Export → PNG, JPEG or SVG. The section shows while the selection holds a layer without Use as mask.

  • Export is always at 1×. It has no scale, quality or background setting.
  • One selected layer downloads as a file named after it. Several download as one ZIP file named after the document, with one file per layer.
  • A file holds the selected layer and everything inside it. Layers behind or on top of it are left out.
  • PNG and JPEG include the layer's strokes and effects, and children that reach outside a frame unless Clip content cuts them off. PNG keeps transparency; JPEG has none.
  • SVG is a vector approximation. Text is written as outlined paths. Image fills are embedded with their crop applied. Hidden layers inside the selected layer and conic gradient fills are not written.

Copy as: right-click → Copy as → Copy as PNG (Ctrl + Shift + C) or Copy as SVG. Copy as PNG copies the whole selection as one image at 1×; Copy as SVG copies SVG source text. Both are available with View (Who can do what).