Using SVGs in Sitefinity

Learn to use SVG graphics in your Sitefinity website.

This brief video shows how easy it is to work with SVGs in Sitefinity.

What are SVGs?

SVGs are vector-based graphics for the web. Unlike JPEGS, GIFs, etc, they are defined mathematically, versus by pixels.

There are several benefits of SVGS, including:

• SVGs are responsive and can scale to whatever size is required.
• They can be styled with CSS, so one image can be used for multiple purposes.

CSS Examples for SVGs:

• Define the color of an SVG:
  • fill: #2874AF;
• Add a drop shadow:
  • filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

Activating SVGs in Sitefinity:

For more information on how to activate SVGs in Sitefinity, reach out to your Vanguard Client Manager, or click here for documentation from Progress Sitefinity.