SVG to Vue Component Converter
Convert SVG markup into a complete Vue single-file component. Add optional script setup and TypeScript, preserve SVG attributes, and download locally.
1 SVG & SFC options
Vue-compatible attributes2 Vue single-file component
Template and optional setupYour file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Package an SVG illustration as a clean Vue SFC without handing it to a server. The generator keeps Vue-compatible SVG attributes and inline styles, formats the template recursively, and can add a typed script setup block with a component name.
- Provide the SVG sourceUpload or paste a valid SVG document. Native XML parsing checks its structure before any Vue source is produced.
- Configure the SFCChoose whether to include script setup and whether that block should use TypeScript.
- Review and exportCheck the template, safety notices, and isolated image preview, then copy or download a ready-to-import .vue component.
Good to know
Frequently asked questions
Are SVG attributes rewritten for Vue?
Standard SVG attributes remain in Vue template form: class stays class, presentation attributes such as stroke-width stay hyphenated, and inline style strings remain style attributes. XML escaping and namespaces are retained.
What does the optional script setup block contain?
When enabled, the SFC includes defineOptions with the SvgComponent name. The TypeScript option adds lang="ts" to that block; no runtime props or dependencies are invented.
How are active content and Vue directives handled?
Script elements, native event handlers, Vue event or binding directives, and JavaScript or VBScript URL values are removed. The tool reports those removals instead of producing a component that could execute imported source instructions.
Are SVG comments and style elements preserved?
Yes. Valid XML comments remain HTML-style comments inside the template, and SVG style elements retain their character content. Mixed text is serialized without adding indentation that could change its rendering.