Who Is This Article For?

This article is for any client looking to add an SVG file to their website pages.

What Is an SVG File?

An SVG (Scalable Vector Graphics) file is a standard web image format used for rendering two-dimensional graphics. SVG files are ideal for logos, icons, and graphics that need to scale without losing quality.

How Do I Embed an SVG File?

Option 1: Embed an SVG Using Raw HTML

This method keeps the image vector-based and allows you to style it with CSS.

1. Go to Website > Pages > All Pages and select the page where you want to add the SVG file.
2. Add a Raw HTML widget to the page.
3. Open your SVG file in a text editor, copy the entire SVG code, and paste it into the widget’s text area.
4. Save your changes and publish the page.

Option 2: Convert SVG to JPG or PNG

This method is useful if you prefer to handle the image like a standard bitmap file.

1. Convert your SVG file to a JPG or PNG using a free online tool such as https://svgtopng.com/.
2. Upload the converted image and add it to your page using the Single Image widget, just as you would with any other image file.

Which Option Should I Choose?

Both methods will display your graphic on your website. Choose the option that fits your needs and comfort level:

• Use Raw HTML if you want crisp scaling and the ability to style the SVG with CSS.
• Convert to JPG/PNG if you need a simple image file and do not require infinite scaling.

Both methods allow you to display your graphics on your website. Choose the option that best fits your needs and technical comfort level.