Convert inline SVG to Base64 string

ONLINECAST

2 min read

·

07-10-2024

6

0

Share

Converting Inline SVG to Base64: A Simple Guide for Web Developers

In web development, using SVG images is often preferred over traditional raster formats like PNG or JPG due to their scalability and smaller file size. Sometimes, you may find yourself with an inline SVG code snippet that you want to convert into a Base64 encoded string for various reasons like embedding directly in your HTML or storing it in a database. This article will guide you through the process of converting inline SVG to Base64 with clarity and efficiency.

Understanding the Scenario:

Imagine you have an SVG code snippet like this:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

You need to convert this SVG into a Base64 encoded string to embed it into your HTML as a data URI.

The Solution:

Here's the code to achieve this conversion:

function svgToBase64(svgCode) {
  const xml = new XMLSerializer().serializeToString(new DOMParser().parseFromString(svgCode, 'image/svg+xml'));
  return 'data:image/svg+xml;base64,' + btoa(xml);
}

const svgCode = `<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>`;

const base64String = svgToBase64(svgCode);
console.log(base64String);

Explanation:

1. DOMParser: This function parses the SVG code string into a DOM object, allowing you to work with it programmatically.
2. XMLSerializer: This function converts the DOM object back into a valid XML string, essential for encoding.
3. btoa: This function encodes the XML string into a Base64 string.
4. Data URI: The Base64 string is prepended with data:image/svg+xml;base64, to form a valid data URI.

Benefits of Converting to Base64:

• Embedding in HTML: You can directly embed Base64 encoded SVG within your HTML using the img tag's src attribute:

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgemlkPSJ0aW1lIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBDeD0iNTAiIGN5PSIxMDAiIHJ9PSIxMDAiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPg==" alt="SVG Image" />

• Database Storage: Storing Base64 encoded SVGs in databases can be convenient, especially if you need to manage a lot of SVGs and don't want to rely on external files.
• Performance: In certain scenarios, embedding SVG as Base64 might be more performant, especially if your website has multiple instances of the same SVG. However, you should benchmark to confirm.

Things to Consider:

• File Size: While Base64 encoding can be convenient, be aware of the potential increase in file size. Large SVGs might significantly impact your website's performance.
• Caching: Using data URIs will prevent browser caching, which might negatively affect performance. Consider using techniques like service workers or other caching strategies if you need to mitigate this.

Conclusion:

Converting inline SVG to Base64 is a valuable technique for web developers to manage and integrate SVGs effectively. Remember to weigh the benefits against potential drawbacks to ensure you're using it strategically for optimal results.