updated
Studio compatibility with imported SVG files
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 |