Svelte component
SVG to Svelte
Paste or upload an SVG and download a .svelte file. The component is built in this tab from the sanitized SVG.
The markup keeps SVG attribute names such as class, stroke-width, and viewBox. A module script exports the component name and does not import React.
Svelte component
Runs in your browser. Your SVG is not uploaded.
Waiting for an SVG
Limit 500 KB and 10,000 elements. The download is a Svelte component. Attributes stay in SVG form, including class and stroke-width. Scripts are removed before the file is created.
Svelte component
The Svelte component will appear here.
What the file contains
A Svelte component here is a <script context="module"> block plus the svg element. The script exports componentName. The markup uses SVG attribute names. class stays class. stroke-width, fill-rule, and viewBox stay as they are in the SVG. Curly braces in text are escaped so Svelte does not treat them as expressions.
Need a React component instead? Use the converter, the JSX page, or the TSX page. Those stay web components. SVG to React Native imports react-native-svg. A Vue single-file component is on the SVG to Vue page. The optimizer, PNG export, and data URI tools are separate.
Example
This pair is the attribute demo run through the same emitter as the tool above. The component name is SvgIcon.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path class="icon" fill-rule="evenodd" clip-rule="evenodd" stroke-width="2" stroke-linecap="round" d="M4 12h16"/> </svg>
<script context="module"> export const componentName = "SvgIcon"; </script> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path class="icon" fill-rule="evenodd" clip-rule="evenodd" stroke-width="2" stroke-linecap="round" d="M4 12h16"/> </svg>
Limits
- 500 KB per SVG. Larger files are rejected and are not emitted.
- 10,000 elements. A larger tree is rejected.
- The SVG is sanitized before the component is created. A failed sanitize produces no file.
- Scripts, event handlers, and embedded HTML are removed. Warnings list those removals.
- The copy and download actions use the Svelte component. The original input is not offered as a file.
Questions
Is my SVG uploaded?
No. Sanitizing and the Svelte component are built in this browser tab. The SVG is not sent to a server, saved in a database, or sent to analytics. Copy and download stay on your device. Closing the tab discards the file.
Is the download a React component?
The download is a Svelte component. A module script exports the component name, and the markup is the svg element. Attributes stay in SVG form: class, stroke-width, and viewBox. The file does not import React. SVGR is not used on this page, because SVGR prints React JSX.
Do scripts stay in the component?
No. The same sanitizer as the converter runs before anything is emitted. Scripts, event handlers, and embedded HTML are removed. Warnings list what was removed. If the SVG cannot be sanitized, the page does not create a component and does not offer the original markup as a download.
How do I use the file in Svelte?
Save the download as a .svelte file and import it from a Svelte project. The svg element is the component markup. Review it before you ship it. width, height, and viewBox stay on the svg element. The module script only exports the component name.