Tool Hub

SVG to Code

Convert SVG markup to HTML / JSX / Vue SFC code

Paste SVG markup and convert to clean HTML, JSX, or Vue code. Automatically handles attribute name conversions (e.g., class → className in JSX).

How to use

  1. Select an output mode: HTML, JSX (React), or Vue Template.
  2. Paste your SVG markup into the input field.
  3. Read the converted code in the output box, where JSX mode renames class to className and converts kebab-case attributes to camelCase.
  4. Copy the output with the copy button.
  5. Verify the live SVG preview below the output to confirm the graphic looks correct.

Examples

  • Pasting an SVG with class="icon" and stroke-width="2" in JSX mode outputs className="icon" and strokeWidth="2".
  • Switching the same input to Vue Template mode replaces class= with :class= while leaving all other attributes unchanged.

Verify outputs before using in production. No warranty — see Terms.