When importing an SVG symbol from a Sketch file to Studio, there are a few differences to note. Check out the following table to see if there are any known limitations for any SVG symbol you're working with.
SVG details |
Studio compatibility |
---|---|
ELEMENTS | |
Paths |
Supported |
Rectangles |
Supported |
Ellipses |
Supported |
Circles |
Supported |
Lines |
Supported |
Polygons |
Supported |
Polylines |
Supported |
Text |
Rotation, wrapping, decoration, and some alignment options are not supported. |
Images |
External images (via URLs) are not supported. |
APPEARANCE |
|
Fills |
Radial gradients that look like ellipses will fall back to circles. Non-zero fill rule is partially supported and only when used on paths. Pattern fills are not supported. |
Borders |
Dashed borders are partially supported. There are some visual fidelity limitations with paths that have multiple segments, borders, and fills. |
Blending |
Partially supported |
EFFECTS | |
Masks |
Excluding black and white, colors on elements inside the mask will fall back to white. Borders on elements inside the mask are ignored. Non-solid fills, such as gradients and patterns, on elements inside the mask will fall back to solid white fills. Relative units are not supported. |
Clip paths | Relative units are not supported. |
Transform |
Skew transforms are not supported. Relative units are not supported. |
Filters |
See filters section below. |
MISCELLANEOUS | |
Groups |
Supported |
Animation |
Not supported |
Interactivity |
Not supported |
References |
External references (via URLs) are not supported. |
CSS |
Some advanced features are not supported, including complex selectors, specificity, variables, expressions, and media queries. |
Symbols |
Not supported |
Relative units |
Partially supported |
FILTERS | |
Summary | Filters are partially supported—only certain primitives are compatible currently. A filter cannot be applied to a shape in Studio unless all primitives are supported. |
feOffset |
Supported |
feFlood |
Supported |
feDropShadow |
This is mostly supported; however, you may experience issues related to filter sub-region and blur (see next row). |
feGaussianBlur |
Faked support using shadows. Images are not supported |
feColorMatrix |
Partially supported—excludes support for images |
feComposite |
Partially supported |
feMerge |
Supported |
feBlend |
Supported |