Import SVG Graphics into Canvas Elements with SVGify Webflow App
In Webflow Designer, SVGify imports vector graphics into the canvas element you select.
Bring an SVG into a selected element in Webflow Designer using a file, pasted markup, or a URL. SVGify is for adding icons, logos, and other vector graphics to your Webflow project.
Imports appear inline as structured SVG elements. You can choose whether to style them in Webflow or retain their original colors.
What it handles
Use SVGify to place an icon, logo, or another SVG graphic inside the canvas element you choose. Supply the artwork by uploading a file, pasting its markup, or entering a URL.
With editable mode on, style the graphic in Webflow’s Style panel using currentColor. Switch that mode off to preserve the SVG’s existing colors.
From install to first use
Open SVGify in Webflow Designer and select a canvas element. Choose an import method: upload an SVG file, paste its markup, or provide a URL.
Set the color mode, then apply the import. For SVGs in Webflow Assets, you can use a URL copied from the Assets panel.
Caveats
You need Webflow Designer access, a selected canvas element, and valid SVG markup to use SVGify. Editable styling relies on currentColor; disabling editable mode keeps the graphic’s original colors.
SVGify FAQ
Can I import an SVG from a URL?
Yes. Provide a URL for the SVG, including one copied from Webflow’s Assets panel.
What types of graphics can I add?
SVGify is suited to importing icons, logos, and other vector graphics.
How can I style an imported SVG?
Turn on editable mode to use Webflow’s Style panel and currentColor for styling.
What happens when editable mode is off?
The SVG retains its original colors.
How does SVGify add the graphic to my project?
It inserts the imported graphic inline as structured SVG elements in the selected canvas element.
