SVG to Code: Base64, Data URI, HTML, React and Vue

The same SVG needs different markup in each place you paste it: a data URI for CSS, inline elements for HTML, and camelCase attribute names plus className for React — pasting raw SVG into JSX is the single most common reason an icon renders blank.

What each of the five outputs is for

• Base64 — the raw encoded payload. Useful when a system asks for “the base64 of this file” and adds the prefix itself, for example an email template or a JSON config.
• Data URI — the complete data:image/svg+xml,... string, percent-encoded rather than base64 so it stays readable and roughly a third smaller. Drop it into img src, background-image:url() or an @font-face-free icon slot.
• HTML — inline markup, indented, XML prolog and comments removed. This is the form you can style with CSS, animate, and recolor with currentColor.
• React — a JSX component with className, camelCase attributes and a {...props} spread, so sizing and aria-* pass through.
• Vue — a single-file component with the markup in <template> and v-bind="$attrs", so attributes land on the root element.

Why attribute conversion matters

JSX is not HTML. Two things break when you paste raw SVG into a component: hyphenated attribute names are read as invalid identifiers, and class collides with the JavaScript reserved word. React therefore expects strokeWidth, strokeLinecap, strokeLinejoin, fillRule, clipRule, stopColor, textAnchor and className. Namespaced attributes follow the same rule: xlink:href becomes xlinkHref, and xml:space becomes xmlSpace.

A second trap is the style attribute. React wants an object, not a CSS string, so style="fill:#5850EC;stroke-width:2" has to become style={{fill:'#5850EC', strokeWidth:2}}. The React tab rewrites inline styles that way and leaves everything else as a string.

Data URI or inline SVG?

Inline SVG saves a request and can inherit currentColor, which is why icon systems inline their icons. The price is bytes in the HTML: each inlined icon is downloaded with the document, uncached separately, and repeated on every page that uses the same markup. A data URI in CSS is cached with the stylesheet, which is a better deal for decorative background patterns that repeat across pages.

Base64 inflates the payload by roughly 33% because three bytes become four characters. Percent-encoding is usually smaller for SVG, since most of the markup is ASCII that survives untouched — only #, <, > and quotes need escaping. The byte counter under each output shows both numbers for your own file, which settles the argument faster than any rule of thumb.

Cleaning before you embed

Every output here strips the XML declaration and comments, because they are wasted bytes in an inline context. For the rest, run the file through the SVG compressor first: it removes editor metadata, collapses groups and rounds path precision, and the result is smaller in all five formats. If the icon should follow the text colour, replace hard-coded fills with currentColor in the colour changer, then re-generate the code here.

Privacy

Parsing uses DOMParser, encoding uses TextEncoder and btoa, and all of it runs in the tab. There is no upload endpoint and no request per keystroke, so an unreleased logo never leaves the device.