Skip to main content

Images and SVG

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 how a crop is applied. 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., and unsupported files dropped together with supported ones are skipped with a message.

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, measured after the scale-down; a larger image is refused with a message. If an upload fails, a message says so and the image is removed again; undo does not bring it back. 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 image button.

  • 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 drop always creates a layer.
  • A paste lands where any paste lands. With shapes selected, a pasted bitmap can become their fill instead of a new layer.

Cropping​

Where: in the fill's image settings, the Adjust image crop button next to the fitting dropdown → 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 image button of a fill, it stays an image fill.
The conversionElements and attributes
Convertssvg and g to frames; path, polygon, polyline to vector layers; rect to a rectangle, with rx/ry as its corner radius (the smaller of the two); circle, ellipse to an oval; line to a line. Fill, stroke and their opacity, element and group opacity as the layer's Opacity, stroke width, dash pattern and blend mode, from attributes and style rules; the transform attribute and the CSS transform, translate, rotate and scale properties, around their transform-origin. linearGradient, radialGradient. In a filter: feGaussianBlur as Blur, feDropShadow as Drop Shadow. clipPath and mask, as described below the table.
Ignorestext, image, use, symbol, pattern.

A clip-path that is one plain rectangle becomes a frame that clips to that rectangle. Any other clip path, and every mask, becomes layers with Use as mask next to the content they cut out. A mask cuts by its opacity, so a luminance mask comes out right only where it is white. Clip paths and masks in objectBoundingBox units, and masks made only of ignored elements, are left out.

Export​

PNG, JPEG and SVG export and Copy as are on Export images and SVG.