CET and SVG Files
Scalable Vector Graphics (SVG) is an open standard of XML-based vector image format for defining two-dimensional graphics. It is supported by most web browsers, and can be created using vector graphics editors like Adobe Illustrator, Inkscape, Figma, and more. Since it is XML-based, it can be opened in a text editor to be inspected and edited.
A vector-based graphics format means that visual images are created directly using geometric shapes (mathematics of coordinate geometry) defined on a Cartesian plane, such as points, lines, curves, and polygons. This is in contrast to raster or bitmap graphics, which represents images using a rectangular grid called pixels.
Vector images have the advantage of being scaled in size without the loss of quality - this allows for potential support for bigger screen sizes and higher resolution displays.
In CET 15.5 Major and later, we have introduced support for the use of SVG files in our development toolkit, allowing developers to use SVG files for UI and icons.
The current SVG support in CET uses Microsoft's Direct2D implementation, which supports the SVG 1.1 Secure Static mode features as listed in Microsoft's API documentation. Any element or attribute not included in the documentation is considered unsupported, for example application of CSS-like styles via class attributes in SVG.
This means there are some specific requirements on the code output (markup) of the SVG file created by external tools, in order to conform to certain expected standards, or it will not show up properly in CET.
For example:
- CSS-like styles via class attributes in SVG (via <defs><styles>) is not supported.
- This can be solved by forcing inline style attributes in your SVG editor. For example, Illustrator's SVG export options allows for a choice in Presentation Attributes vs Style Attributes.
- The <svg> tag should have explicit width and height params.
- In Illustrator, ensure that the "Responsive" checkbox is unchecked to export width and height parameters.
- Prefer simpler geometries and flattened path elements, for "cleaner exports" to avoid potential issues.
- For example, Figma artworks with Union or Mask operations may render with weird artifacts, and should be converted to Vector Paths upon export.
- Things like fill-rule and clip-path may cause weirdness, even in browsers.
- Consider using tools like SVGO or SVGOMG to cleanup and optimize SVG files.
