About

How to use SVG on Your Website

The following tips will work in all modern browsers but double check if you need to support old IE or old Android browsers. The first step is to register on Genolve. Registered users have two export buttons; quick-export and export with resize/zoom.

SVG For WordPress Websites

WordPress does not allow you to upload SVG as a media file; replying with "Sorry, this file type is not permitted for security reasons." The security issue is that SVG can contain javascript. However, if you know and trust the source of your SVG files, they are completely safe. You can download the Genolve WordPress plugin to use SVG by dynamically swapping it in with jQuery. This technique is fast and works on most themes.

Do you want a plugin for another CMS? let us know!

SVG For other Websites

OPTION1)

Save the SVG as a file with the extension ".svg" and use it as you would an image file:

OPTION2)

As a CSS background style:

.colorSelector {
width: 36px;
height: 36px;
background: url(/svgs/selectcolor.svg);
}

OPTION3)

Use SVG source code directly in the webpage:

Edit the .svg file with a text editor or use "view source" on the browser to find it.

Paste everything inside the <svg>... </svg> tags directly into your webpage. It often helps to set your SVG width/height to 100% then have a wrapping div set the desired width/height (also set in percent). This allows your SVG to scale dynamically to different browser sizes.