SVG

Add Scalable Vector Graphics to your website

SVGs (Scalable Vector Graphics) have become a go-to choice for web design because they offer incredible flexibility and quality. Unlike traditional image formats like JPEG or PNG, SVGs are vector-based, meaning they’re made up of lines and shapes rather than pixels. This makes them infinitely scalable without losing quality, so they look sharp on any screen size or resolution, from small mobile devices to large desktop monitors.

Important Note: The SVG Component will attempt to do a basic "cleanup" of the SVG file before it is displayed. This "cleanup" includes removing fill, width, height, stroke-width, and style attributes from the SVG — This is done at runtime and does not alter the code of the SVG stored in Elements.

Here are a few reasons why SVGs are especially useful on websites:

1. Crisp at Any Size: SVGs maintain perfect clarity when resized, ensuring icons, logos, and illustrations always appear sharp and professional.

2. Small File Size: SVGs are typically smaller than high-resolution images, which helps websites load faster. Their code-based structure allows them to be easily optimized, minimizing file size and improving performance.

3. Easy to Style: SVGs can be styled directly with CSS, making them easy to fit in with the colours and style of your website.

SVG Controls

SVG

To add an SVG, drop it from the Finder (or Resources) area into the Dropwell.

Fill

To set a fill colour on an SVG it needs to be setup correctly to support fill colours.

Link Types	Description
None	No colour or classes will be applied to the SVG.
Static	Set a single fill colour on the SVG.
Hover	Set a Start and End colour for the SVG. The Hover colour is displayed when the mouse cursor is over the SVG.

Stroke

To set a stroke colour on an SVG it needs to be setup correctly to support stroke colours.

Link Types	Description
None	No colour or classes will be applied to the SVG.
Static	Set a single fill colour on the SVG.
Hover	Set a Start and End colour for the SVG. The Hover colour is displayed when the mouse cursor is over the SVG.
Width	Set a stroke width for the SVG in pixels.

How to "cleanup" SVG's with Sketch

SVG Cleanup with Sketch App on the Elements Forum provides a good overview and discussion on the best way to get your SVG's ready for use in Elements.

You can download Sketch App here, and the SVGO plugin here.

Q&A on fixing SVG's for display on a website.

Getting SVG's to display correctly is a bit of a dark art, but with a bit of tinkering you'll be able to modify them to work and look great on the web and in Elements.

Q: Why doesn't the Fill or Stroke colour work as expected?

A: SVG images don’t always respond as expected to CSS styles for a few reasons, and it’s a common stumbling block. Here’s a quick rundown on why this happens and how to get more reliable control over your SVGs in RapidWeaver Elements…

SVG elements have their own styling properties, like fill and stroke, which can sometimes conflict with CSS styles. If these attributes are set within the SVG code itself, they can override Colours and Styles from Elements.

For scalable, theme-compatible SVGs, you can set the fill and stroke attributes to currentColor within the SVG file. This approach allows Elements to set SVG color for the stroke or Fill.

Set fill="currentColor" within your SVGs if you want Elements to set the colour of the stroke or fill. Depending on how the SVG is coded, this might not work, if that is the case, you should try removing fill="currentColor" from yoru SVG.

Set fill to currentColor or remove it, to allow Elements to set the fill colour of your SVG.

Q: How do I change the size of an SVG?

A: Use the Sizing settings in the component inspector, by default this is set to use a Theme Studio value. Custom CSS values can also be used to size the SVG.

Q: Why doesn't the SVG change size when I adjust the sizing in Elements?

A: Remove the height and width values in the SVG file, see screenshot below for an example.

Remove width and height to let Elements set the scale of your SVG

Q: Where can I find SVG Icons for use in Elements?

A: Tabler Icons has over 5,650 free SVG icons, they are all perfect for use on your Elements websites. Download any of the icons from there and remove the width and height code (as above), and they are ready to use in your project. The icons from Tabler are setup to use the stroke attribute. See the video below for a quick overview of how this works in practice. Also, see our list above.

Free SVG Icon Libraries

All of the following icon libraries work well Elements, if you require them to be resiable in Elements you'll need to remove the Height and Width values from the code before importing.

• https://lucide.dev, open-source library, over 1000+ svg icons.
• https://tabler.io/icons, over 5,650 free SVG icons.
• https://feathericons.com, simply beautiful open source icons
• https://phosphoricons.com, outline, filled, duotone and more.
• https://svgl.app, a beautiful library of company SVG logos.
• https://heroicons.com, hand-crafted SVG icons, by the makers of Tailwind CSS (you'll need to copy and paste the code into a file and save it with a .svg extension before adding to Elements).
• Google Material Symbol Icons.
• Logoipsum, a collection of svg placeholder logos.

Further Reading

• Practical SVG by Chris Coyier