Export SVG code from a vectorized image with Figma

Tutorial
March 20, 2023
3 min
Digidop blog
Key points

In a previous tutorial, we showed you how to retrieve the HTML code from any SVG file. Today, we'll present another way to do it (faster) directly in Figma with just two clicks.

Step 1: Import Your SVG into Figma

The first step in this tutorial is to insert your SVG file into Figma or create a vector using the design tool.

Step 2: Select Your SVG

After importing it, you will select your file in Figma by clicking on it.

Step 3: Copy as SVG

Once selected, right-click, hover over "Copy/Paste as", and then click on "Copy as SVG". This action will allow you, when you paste (cmd or ctrl + V) into a text editor, to obtain the HTML code for your vector image.

copy as svg in figma

Step 4: Paste the SVG Code

All you need to do is paste what you copied into a text editor. For example, in a Webflow embed, a notepad, a spreadsheet, or anywhere you like.

paste svg code from figma file

That's it! You can now quickly retrieve the code for a vector image with Figma. You can also learn how to convert PNG to SVG from Figma.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today