SVG to Base64 Converter
Encode an SVG as a Base64 data URI (or a smaller URL-encoded one) to embed it in HTML, CSS, JSON or email.
- Base64 & URL-encoded
- UTF-8 safe
- <img> tag
- No upload
Details
- Size
- 240 × 240 px
- width / height
- 240 / 240
- viewBox
- 0 0 240 240
- File size
- 691 B
- Elements
- 9
- IDs
- 1
- Embedded images
- 0
Colours (4)
Fonts
Inter, Arial, sans-serif
Elements
- stop ×2
- svg ×1
- defs ×1
- linearGradient ×1
- rect ×1
- circle ×1
- path ×1
- text ×1
Safety check
No scripts, event handlers or external resources found.
The preview is drawn as an image, so scripts never run here.
Base64 and data URI
What is an SVG data URI?
A data URI puts a whole file inside a URL, so the SVG travels with your HTML, CSS, JSON or Markdown instead of being a separate file. data:image/svg+xml;base64,… encodes the bytes as Base64, which works everywhere but is about a third larger. data:image/svg+xml,… with URL encoding is smaller and readable, and works in browsers and CSS. This converter produces both, handles non-ASCII text correctly (encoding as UTF-8 first), and can strip comments and editor metadata before encoding.
How to convert SVG to Base64
- Open or paste your SVG.
- Choose Base64 or Data URI (URL-encoded).
- Copy the result, or the <img> tag version.
- Paste it into your HTML, CSS, JSON or Markdown.
When to use which
- Use the URL-encoded data URI in CSS and modern browsers: it is smaller.
- Use Base64 where special characters are not allowed, such as some email clients and JSON fields.
- Many email clients block SVG entirely; consider a PNG for email.
- Data URIs are not cached separately, so keep them for small images.
Why use this SVG to Base64 converter
- Both encodingsBase64 for maximum compatibility, URL-encoded for the smallest size.
- Correct with any textAccents, emoji and non-Latin text are encoded as UTF-8, so they survive the trip.
- Everything about the fileReal size from width, height and viewBox (mm, pt and in converted to px), file size and gzipped size, element counts, colours with one-click copy, and fonts.
- Nothing leaves your browserSVG files are read and rendered locally, so logos, icons and client artwork are never uploaded.
Common uses
- HTML emails. Inline small logos without attachments.
- JSON and APIs. Store icons inside configuration or API payloads.
- Single-file pages. Make an HTML file with no external assets.
- Markdown. Embed images in README files without hosting them.
More SVG tools: convert SVG to PNG or SVG to JPG in bulk, make an ICO icon from SVG, or encode any file with the Base64 encoder.
Example: sizes compared
The 691-byte sample shrinks to 604 bytes once its comment and whitespace are removed. As Base64 that becomes 834 bytes; as a URL-encoded data URI, 687 bytes.
What to expect from the result
The preview uses your browser’s SVG renderer, so filters and fonts may differ slightly from Illustrator or Inkscape. External images are blocked in image previews, as on real websites.
SVG to Base64 Converter questions
How do I convert SVG to Base64?
Open or paste the SVG and choose Base64. Copy the data:image/svg+xml;base64,… string or the ready-made <img> tag.
Is Base64 or URL encoding better for SVG?
URL encoding is smaller and readable, and works in CSS and browsers. Base64 is safer in places that reject special characters.
Why is my Base64 SVG broken?
Usually because non-ASCII characters were encoded without UTF-8 conversion, or the xmlns attribute is missing. This converter handles both.
Can an SVG contain a virus?
An SVG can contain JavaScript that runs when the file is opened directly in a browser or inlined in a page. This viewer shows SVGs as images, where scripts never run, and the safety check lists any scripts or event handlers it finds.
Is my SVG uploaded?
No. The file is opened and rendered in your browser. Nothing is sent to a server.