There is a lot of power using SVG (Scalable Vector Graphics) for web development.
Overview
Snowfire supports multiple approaches for adding SVG images in block development. While uploading to Assets and using <img> tags is possible, we recommend adding the SVG image in your CSS since it gives you more power to change the image dynamically.
SVG in CSS
Basic Example
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3C/svg%3E");
}
Dynamic Color
When adding custom SVG code, replace fill="#fff..." with fill="{svgcolor:$icon}" and add a color property element.
Property Configuration
<color variable="$icon" default="rgba(0, 0, 0, 1)" kind="icon" force-reload="true" alpha-disabled="true" />
Property Attributes
Attribute | Description |
| Requires browser refresh to view color changes |
| Prevents alpha channel definition (unsupported for SVG fills) |