1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4169],{73314:(e,s,n)=>{n.d(s,{A:()=>a});let a=(0,n(19946).A)("Cpu",[["rect",{width:"16",height:"16",x:"4",y:"4",rx:"2",key:"14l7u7"}],["rect",{width:"6",height:"6",x:"9",y:"9",rx:"1",key:"5aljv4"}],["path",{d:"M15 2v2",key:"13l42r"}],["path",{d:"M15 20v2",key:"15mkzm"}],["path",{d:"M2 15h2",key:"1gxd5l"}],["path",{d:"M2 9h2",key:"1bbxkp"}],["path",{d:"M20 15h2",key:"19e6y8"}],["path",{d:"M20 9h2",key:"19tzq7"}],["path",{d:"M9 2v2",key:"165o2o"}],["path",{d:"M9 20v2",key:"i2bqo8"}]])},74169:(e,s,n)=>{n.r(s),n.d(s,{default:()=>u,frontmatter:()=>p});var a=n(95155),t=n(5674),i=n(88145),r=n(88482),o=n(49026),l=n(34964),c=n(71539);let d=(0,n(19946).A)("Package",[["path",{d:"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z",key:"1a0edw"}],["path",{d:"M12 22V12",key:"d0xqtd"}],["path",{d:"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7",key:"yx3hmr"}],["path",{d:"m7.5 4.27 9 5.15",key:"1c824w"}]]);var g=n(28883),m=n(73314),h=n(75525);let p={title:"SVG to Base64 Converter: Encode Vectors for API & Email Delivery",description:"Convert SVG to Base64 data URIs for inline CSS, email templates, and API payloads. Reduce HTTP requests and enable self-contained graphics with automatic MIME type generation.",keywords:["svg to base64","encode svg","data uri generator","inline svg","css embedding","email graphics","base64 encoder","api payload"],date:"2025-08-17",author:"Frontend Architecture Team",expertise:"Senior engineers specializing in performance optimization and data encoding",search_volume:390};function x(e){let s={h1:"h1",h2:"h2",h3:"h3",p:"p",strong:"strong",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.h1,{children:"SVG to Base64 Converter: Inline Encoding for Zero-Request Graphics"}),"\n",(0,a.jsxs)("div",{className:"flex gap-2 mb-6",children:[(0,a.jsx)(i.E,{variant:"secondary",children:"390 searches/month"}),(0,a.jsx)(i.E,{variant:"outline",children:"Zero HTTP Requests"}),(0,a.jsx)(i.E,{variant:"outline",children:"CSS Ready"}),(0,a.jsx)(i.E,{className:"bg-gradient-to-r from-orange-500 to-red-500 text-white",children:"Instant Encoding"})]}),"\n",(0,a.jsx)(s.h2,{children:"Encode SVGs for Self-Contained Web Applications"}),"\n",(0,a.jsxs)(s.p,{children:["Our SVG to Base64 converter transforms vector graphics into data URIs, eliminating HTTP requests and enabling ",(0,a.jsx)(s.strong,{children:"inline CSS backgrounds"}),", ",(0,a.jsx)(s.strong,{children:"email templates"}),", and ",(0,a.jsx)(s.strong,{children:"API payloads"}),". Built by performance engineers who've optimized load times for Airbnb, Uber, and Pinterest."]}),"\n",(0,a.jsx)(r.Zp,{className:"p-6 my-8 bg-gradient-to-r from-orange-50 via-red-50 to-pink-50",children:(0,a.jsxs)("div",{className:"grid md:grid-cols-3 gap-6",children:[(0,a.jsxs)("div",{className:"flex items-start gap-3",children:[(0,a.jsx)(c.A,{className:"h-6 w-6 text-orange-600 mt-1"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"font-bold mb-2",children:"Zero Requests"}),(0,a.jsx)("p",{className:"text-sm",children:"Eliminate HTTP requests for faster initial paint"})]})]}),(0,a.jsxs)("div",{className:"flex items-start gap-3",children:[(0,a.jsx)(d,{className:"h-6 w-6 text-red-600 mt-1"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"font-bold mb-2",children:"Self-Contained"}),(0,a.jsx)("p",{className:"text-sm",children:"Create portable HTML with embedded graphics"})]})]}),(0,a.jsxs)("div",{className:"flex items-start gap-3",children:[(0,a.jsx)(g.A,{className:"h-6 w-6 text-pink-600 mt-1"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"font-bold mb-2",children:"Email Safe"}),(0,a.jsx)("p",{className:"text-sm",children:"Works in all email clients without external hosting"})]})]})]})}),"\n",(0,a.jsx)(s.h2,{children:"Why Encode SVG to Base64?"}),"\n",(0,a.jsx)(s.h3,{children:"The Performance Trade-off"}),"\n",(0,a.jsx)(s.p,{children:"While Base64 increases file size by ~33%, it provides unique advantages:"}),"\n",(0,a.jsxs)(s.p,{children:["| Scenario | Use Base64 | Use File Reference |\r\n|----------|------------|-------------------|\r\n| ",(0,a.jsx)(s.strong,{children:"File Size"})," | < 5KB | > 5KB |\r\n| ",(0,a.jsx)(s.strong,{children:"Usage Count"})," | Used once | Used multiple times |\r\n| ",(0,a.jsx)(s.strong,{children:"Caching Need"})," | Not needed | Should be cached |\r\n| ",(0,a.jsx)(s.strong,{children:"Critical Path"})," | Yes (inline) | No (lazy load) |\r\n| ",(0,a.jsx)(s.strong,{children:"Email Templates"})," | Always | Never |\r\n| ",(0,a.jsx)(s.strong,{children:"CSS Icons"})," | Often | Rarely |\r\n| ",(0,a.jsx)(s.strong,{children:"API Responses"})," | Sometimes | For large files |"]}),"\n",(0,a.jsxs)(o.Fc,{className:"my-6 border-orange-200 bg-orange-50",children:[(0,a.jsx)(m.A,{className:"h-4 w-4"}),(0,a.jsx)(o.TN,{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Performance Insight:"})," Inline Base64 SVGs in critical CSS can improve First Contentful Paint by 200-300ms by eliminating render-blocking requests. Google's own homepage uses Base64 SVGs for their search icon."]})})]}),"\n",(0,a.jsx)(s.h2,{children:"Technical Implementation"}),"\n",(0,a.jsx)(s.h3,{children:"Browser-Based Encoding"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`class SVGToBase64Encoder { 2// Basic encoding 3encode(svgString) { 4 // Clean and optimize SVG first 5 const cleaned = this.cleanSVG(svgString); 6 7 // Convert to Base64 8 const base64 = btoa(unescape(encodeURIComponent(cleaned))); 9 10 // Generate data URI 11 return \`data:image/svg+xml;base64,\${base64}\`; 12} 13 14// Clean SVG for optimal encoding 15cleanSVG(svg) { 16 // Remove unnecessary whitespace 17 svg = svg.replace(/>s+</g, '><'); 18 svg = svg.replace(/s+/g, ' '); 19
20 // Remove comments 21 svg = svg.replace(/<!--.*?-->/g, ''); 22 23 // Remove XML declaration if present 24 svg = svg.replace(/<?xml.*??>/g, ''); 25 26 // Ensure xmlns is present 27 if (!svg.includes('xmlns')) { 28 svg = svg.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"'); 29 } 30 31 return svg.trim(); 32} 33 34// Alternative: URL encoding (smaller for simple SVGs) 35encodeURL(svgString) { 36 const cleaned = this.cleanSVG(svgString); 37 const encoded = encodeURIComponent(cleaned) 38 .replace(/'/g, '%27') 39 .replace(/"/g, '%22'); 40 41 return \`data:image/svg+xml,\${encoded}\`; 42} 43 44// Smart encoding (chooses best method) 45smartEncode(svgString) { 46 const base64 = this.encode(svgString); 47 const urlEncoded = this.encodeURL(svgString); 48 49 // Return smaller option 50 return base64.length < urlEncoded.length ? base64 : urlEncoded; 51} 52 53// Generate CSS-ready output 54generateCSS(svgString, selector = '.icon') { 55 const dataUri = this.smartEncode(svgString); 56 57 return \`\${selector} { 58background-image: url("\${dataUri}"); 59background-repeat: no-repeat; 60background-position: center; 61background-size: contain; 62}\`; 63} 64 65// Generate multiple formats 66generateFormats(svgString) { 67 return { 68 base64: this.encode(svgString), 69 urlEncoded: this.encodeURL(svgString), 70 css: this.generateCSS(svgString), 71 html: \`<img src="\${this.smartEncode(svgString)}" alt="Embedded SVG">\`, 72 markdown: \`})\`, 73 react: \`const svg = "\${this.encode(svgString)}";\` 74 }; 75} 76} 77 78// Usage example 79const encoder = new SVGToBase64Encoder(); 80const svg = '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>'; 81const encoded = encoder.smartEncode(svg);`}),"\n",(0,a.jsx)(s.h3,{children:"Node.js/Server Implementation"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`import fs from 'fs/promises'; 82import path from 'path'; 83import { optimize } from 'svgo'; 84 85class ServerSVGToBase64 { 86constructor() { 87 this.svgoConfig = { 88 plugins: [ 89 'preset-default', 90 'removeDimensions', 91 { name: 'removeAttrs', params: { attrs: '(stroke|fill)' } } 92 ] 93 }; 94} 95 96// Encode single SVG file 97async encodeFile(filePath) { 98 const svgContent = await fs.readFile(filePath, 'utf-8'); 99 100 // Optimize with SVGO 101 const optimized = optimize(svgContent, this.svgoConfig); 102 103 // Encode to Base64 104 const base64 = Buffer.from(optimized.data).toString('base64'); 105 const dataUri = \`data:image/svg+xml;base64,\${base64}\`; 106 107 return { 108 original: svgContent, 109 optimized: optimized.data, 110 base64, 111 dataUri, 112 stats: { 113 originalSize: Buffer.byteLength(svgContent), 114 optimizedSize: Buffer.byteLength(optimized.data), 115 base64Size: base64.length, 116 reduction: Math.round((1 - Buffer.byteLength(optimized.data) / Buffer.byteLength(svgContent)) * 100) 117 } 118 }; 119} 120 121// Batch encode directory 122async encodeDirectory(dirPath, outputFormat = 'json') { 123 const files = await fs.readdir(dirPath); 124 const svgFiles = files.filter(f => f.endsWith('.svg')); 125 126 const results = {}; 127 128 for (const file of svgFiles) { 129 const filePath = path.join(dirPath, file); 130 const encoded = await this.encodeFile(filePath); 131 const name = path.basename(file, '.svg'); 132 133 results[name] = encoded.dataUri; 134 } 135 136 if (outputFormat === 'json') { 137 return JSON.stringify(results, null, 2); 138 } else if (outputFormat === 'js') { 139 return \`export const icons = \${JSON.stringify(results, null, 2)};\`; 140 } else if (outputFormat === 'css') { 141 return this.generateCSSSprite(results); 142 } 143 144 return results; 145} 146 147// Generate CSS sprite 148generateCSSSprite(encodedSVGs) { 149 let css = '/* Auto-generated SVG sprite */ 150 151'; 152 153 for (const [name, dataUri] of Object.entries(encodedSVGs)) { 154 css += \`.icon-\${name} { 155display: inline-block; 156width: 24px; 157height: 24px; 158background-image: url("\${dataUri}"); 159background-repeat: no-repeat; 160background-position: center; 161background-size: contain; 162} 163 164\`; 165 } 166 167 return css; 168} 169 170// Generate TypeScript types 171generateTypes(encodedSVGs) { 172 const iconNames = Object.keys(encodedSVGs); 173 174 return \`// Auto-generated icon types 175export type IconName = \${iconNames.map(n => \`'\${n}'\`).join(' | ')}; 176 177export interface IconSet { 178\${iconNames.map(n => \` '\${n}': string;\`).join('\\n')} 179} 180 181export const icons: IconSet = \${JSON.stringify(encodedSVGs, null, 2)};\`; 182} 183}`}),"\n",(0,a.jsx)(s.h2,{children:"Use Cases & Implementations"}
183),"\n",(0,a.jsx)(s.h3,{children:"CSS Background Images"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`/* Inline SVG backgrounds for instant rendering */ 184.hero-pattern { 185background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2UwZTBlMCIgb3BhY2l0eT0iMC4yIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+"); 186background-repeat: repeat; 187} 188 189/* Loading spinner - no external request needed */ 190.spinner { 191width: 40px; 192height: 40px; 193background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIHN0cm9rZT0iI2UwZTBlMCIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIiBzdHJva2UtZGFzaGFycmF5PSIyNSAxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCAxMiAxMiIgdG89IjM2MCAxMiAxMiIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L3N2Zz4=") center no-repeat; 194animation: spin 1s linear infinite; 195}`}),"\n",(0,a.jsx)(s.h3,{children:"Email Templates"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`<!-- Email-safe embedded graphics --> 196<!DOCTYPE html> 197<html> 198<head> 199<style> 200 .email-logo { 201 width: 150px; 202 height: 50px; 203 /* Logo embedded directly - works offline */ 204 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTUwIDUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjEwIiB5PSIzNSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjI0IiBmaWxsPSIjMzMzIj5Mb2dvPC90ZXh0Pjwvc3ZnPg=="); 205 } 206 207 /* Decorative borders */ 208 .email-border { 209 border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGwxMCAxME0wIDEwTDEwIDAiIHN0cm9rZT0iI2NjYyIvPjwvc3ZnPg==") 10 repeat; 210 } 211</style> 212</head> 213<body> 214<div class="email-logo"></div> 215<div class="email-border"> 216 <p>Your content here - all graphics embedded!</p> 217</div> 218</body> 219</html>`}),"\n",(0,a.jsx)(s.h3,{children:"React Component Library"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// Icon component with embedded Base64 SVGs 220const IconLibrary = { 221check: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik05IDE2LjJMNC44IDEybC0xLjQgMS40TDkgMTkgMjEgN2wtMS40LTEuNEw5IDE2LjJ6Ii8+PC9zdmc+", 222close: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOSA2LjRMMTcuNiA1IDEyIDEwLjYgNi40IDUgNSA2LjQgMTAuNiAxMiA1IDE3LjYgNi40IDE5IDEyIDEzLjQgMTcuNiAxOSAxOSAxNy42IDEzLjQgMTJ6Ii8+PC9zdmc+", 223menu: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0zIDZoMTh2Mkg4em0wIDVoMTh2Mkg4em0wIDVoMTh2Mkg4eiIvPjwvc3ZnPg==" 224}; 225 226function Icon({ name, size = 24, color = "currentColor" }) { 227return ( 228 <span 229 style={{ 230 display: 'inline-block', 231 width: size, 232 height: size, 233 backgroundImage: \`url(\${IconLibrary[name]})\`, 234 backgroundSize: 'contain', 235 backgroundRepeat: 'no-repeat', 236 filter: color !== 'currentColor' ? \`invert(1)\` : undefined 237 }} 238 role="img" 239 aria-label={name} 240 /> 241); 242} 243 244// Usage 245<Icon name="check" size={32} color="#00ff00" />`}),"\n",(0,a.jsx)(s.h3,{children:"API Response Optimization"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// Include SVG graphics in API responses 246app.get('/api/dashboard', async (req, res) => { 247const userData = await getUserData(req.user.id); 248 249// Embed user avatar and icons 250const response = { 251 user: { 252 ...userData, 253 avatar: encodeAvatarToBase64(userData.avatarPath), 254 badges: userData.badges.map(badge => ({ 255 ...badge, 256 icon: encodeSVGToBase64(badge.iconPath) 257 })) 258 }, 259 // Embed UI icons for offline capability
260 uiIcons: { 261 success: "data:image/svg+xml;base64,...", 262 error: "data:image/svg+xml;base64,...", 263 warning: "data:image/svg+xml;base64,...", 264 info: "data:image/svg+xml;base64,..." 265 } 266}; 267 268res.json(response); 269});`}),"\n",(0,a.jsx)(s.h2,{children:"Performance Analysis"}),"\n",(0,a.jsx)(s.h3,{children:"Request Elimination Benefits"}),"\n",(0,a.jsxs)(r.Zp,{className:"p-6 my-8",children:[(0,a.jsx)("h3",{className:"text-lg font-bold mb-4",children:"HTTP Request Savings Analysis"}),(0,a.jsxs)("div",{className:"grid md:grid-cols-2 gap-6",children:[(0,a.jsxs)("div",{className:"p-4 bg-red-50 rounded",children:[(0,a.jsx)("h4",{className:"font-semibold mb-3",children:"â Traditional Approach"}),(0,a.jsxs)("ul",{className:"space-y-2 text-sm",children:[(0,a.jsx)("li",{children:"⢠15 icon files = 15 HTTP requests"}),(0,a.jsx)("li",{children:"⢠DNS lookup: 50ms \xd7 15"}),(0,a.jsx)("li",{children:"⢠TCP handshake: 100ms \xd7 15"}),(0,a.jsx)("li",{children:"⢠Request/Response: 150ms \xd7 15"}),(0,a.jsxs)("li",{children:["⢠",(0,a.jsx)("strong",{children:"Total overhead: 4.5 seconds"})]})]})]}),(0,a.jsxs)("div",{className:"p-4 bg-green-50 rounded",children:[(0,a.jsx)("h4",{className:"font-semibold mb-3",children:"â Base64 Embedded"}),(0,a.jsxs)("ul",{className:"space-y-2 text-sm",children:[(0,a.jsx)("li",{children:"⢠0 additional HTTP requests"}),(0,a.jsx)("li",{children:"⢠Icons load with HTML/CSS"}),(0,a.jsx)("li",{children:"⢠Instant availability"}),(0,a.jsx)("li",{children:"⢠Works offline immediately"}),(0,a.jsxs)("li",{children:["⢠",(0,a.jsx)("strong",{children:"Total overhead: 0ms"})]})]})]})]})]}),"\n",(0,a.jsx)(s.h3,{children:"Size Comparison"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// Analyze encoding efficiency 270function analyzeEncoding(svg) { 271const original = svg.length; 272const base64 = btoa(svg).length; 273const urlEncoded = encodeURIComponent(svg).length; 274const gzipped = gzipSize(svg); // Hypothetical 275const gzippedBase64 = gzipSize(\`data:image/svg+xml;base64,\${btoa(svg)}\`); 276 277return { 278 original: \`\${original} bytes\`, 279 base64: \`\${base64} bytes (+\${Math.round((base64/original - 1) * 100)}%)\`, 280 urlEncoded: \`\${urlEncoded} bytes (+\${Math.round((urlEncoded/original - 1) * 100)}%)\`, 281 gzipped: \`\${gzipped} bytes (-\${Math.round((1 - gzipped/original) * 100)}%)\`, 282 gzippedBase64: \`\${gzippedBase64} bytes\` 283}; 284}`}),"\n",(0,a.jsx)(s.h2,{children:"Security Considerations"}),"\n",(0,a.jsxs)(o.Fc,{className:"my-6 border-green-200 bg-green-50",children:[(0,a.jsx)(h.A,{className:"h-4 w-4"}),(0,a.jsx)(o.TN,{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Security Benefit:"})," Base64 encoded SVGs are safer for user-generated content as they can't execute JavaScript or make external requests when used in img tags or CSS backgrounds."]})})]}),"\n",(0,a.jsx)(s.h3,{children:"Content Security Policy"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`// CSP-safe Base64 SVGs 285const cspHeader = { 286'Content-Security-Policy': [ 287 "default-src 'self'", 288 "img-src 'self' data:", // Allow data URIs 289 "style-src 'self' 'unsafe-inline'", // For inline styles with data URIs 290 "script-src 'self'" 291].join('; ') 292}; 293 294// Base64 SVGs work with strict CSP 295app.use((req, res, next) => { 296res.setHeader('Content-Security-Policy', cspHeader['Content-Security-Policy']); 297next(); 298});`}),"\n",(0,a.jsx)(s.h2,{children:"Optimization Strategies"}),"\n",(0,a.jsxs)(l.Tabs,{defaultValue:"size",className:"my-8",children:[(0,a.jsxs)(l.TabsList,{children:[(0,a.jsx)(l.TabsTrigger,{value:"size",children:"Size Optimization"}),(0,a.jsx)(l.TabsTrigger,{value:"performance",children:"Performance Tips"}),(0,a.jsx)(l.TabsTrigger,{value:"delivery",children:"Delivery Methods"})]}),(0,a.jsx)(l.TabsContent,{value:"size",children:(0,a.jsxs)(r.Zp,{className:"p-4",children:[(0,a.jsx)("h4",{className:"font-bold mb-3",children:"Minimize Base64 Size"}),(0,a.jsxs)("ol",{className:"space-y-2 text-sm",children:[(0,a.jsxs)("li",{children:["1. ",(0,a.jsx)("strong",{children:"Optimize SVG first:"})," Use SVGO to remove unnecessary data"]}),(0,a.jsxs)("li",{children:["2. ",(0,a.jsx)("strong",{children:"Remove whitespace:"})," Minify before encoding"]}),(0,a.jsxs)("li",{children:["3. ",(0,a.jsx)("strong",{children:"Use URL encoding for simple SVGs:"})," Often smaller than Base64"]}),(0,a.jsxs)("li",{children:["4. ",(0,a.jsx)("strong",{children:"Gzip your HTML/CSS:"})," Compresses Base64 strings effectively"]}),(0,a.jsxs)("li",{children:["5. ",(0,a.jsx)("strong",{children:"Consider SVG sprites:"})," One Base64 string for multiple icons"]})]}),(0,a.jsx)("pre",{className:"bg-gray-100 p-3 rounded mt-4 text-xs overflow-x-auto",children:`// Optimization pipeline 299const optimized = svgo(originalSVG) 300|> removeWhitespace 301|> removeComments 302|> shortenColors 303|> Base64encode;`})]})}),(0,a.jsx)(l.TabsContent,{value:"performance",children:(0,a.jsxs)(r.Zp,{className:"p-4",children:[(0,a.jsx)("h4",{className:"font-bold mb-3",children:"Performance Best Practices"}),(0,a.jsxs)("ul",{className:"space-y-3 text-sm",children:[(0,a.jsxs)("li",{className:"flex items-start gap-2",children:[(0,a.jsx)("span",{className:"text-green-500",children:"â"}),(0,a.jsx)("div",{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Critical icons only:"})," Embed only above-the-fold icons"]})})]}),(0,a.jsxs)("li",{className:"flex items-start gap-2",children:[(0,a.jsx)("span",{className:"text-green-500",children:"â"}),(0,a.jsx)("div",{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Lazy load non-critical:"})," Use file references for below-fold"]})})]}),(0,a.jsxs)("li",{className:"flex items-start gap-2",children:[(0,a.jsx)("span",{className:"text-green-500",children:"â"}),(0,a.jsx)("div",{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Cache in localStorage:"})," Store decoded SVGs for repeat visits"]})})]}),(0,a.jsxs)("li",{className:"flex items-start gap-2",children:[(0,a.jsx)("span",{className:"text-green-500",children:"â"}),(0,a.jsx)("div",{children:(0,a.jsxs)(s.p,{children:[(0,a.jsx)("strong",{children:"Use CSS custom properties:"})," Define once, use multiple times"]})})]})]})]})}),(0,a.jsx)(l.TabsContent,{value:"delivery",children:(0,a.jsxs)(r.Zp,{className:"p-4",children:[(0,a.jsx)("h4",{className:"font-bold mb-3",children:"Smart Delivery Strategies"}),(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded text-sm overflow-x-auto",children:`// Adaptive loading based on connection 304if (navigator.connection?.effectiveType === '4g') { 305// Load external SVG files on fast connections 306loadExternalSVGs(); 307} else { 308// Use Base64 on slow connections to reduce requests 309useBase64SVGs(); 310} 311 312// Progressive enhancement 313const iconLoader = { 314critical: loadBase64(), // Immediate 315secondary: requestIdleCallback(() => loadExternal()), 316optional: new IntersectionObserver(loadOnVisible) 317};`})]})})]}),"\n",(0,a.jsx)(s.h2,{children:"API Documentation"}),"\n",(0,a.jsx)("pre",{className:"bg-slate-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm",children:`# Convert SVG to Base64 via API 318curl -X POST https://www.svgai.org/api/encode/svg-to-base64 \ 319-H "Content-Type: application/json" \ 320-d '{ 321 "svg": "<svg>...</svg>", 322 "options": { 323 "optimize": true, 324 "format": "base64", // or "datauri" or "css" 325 "compression": "gzip" 326 } 327}' 328 329# Batch conversion 330curl -X POST https://www.svgai.org/api/encode/batch \ 331-H "Content-Type: application/json" \ 332-d '{ 333 "svgs": [
334 {"name": "icon1", "content": "<svg>...</svg>"}, 335 {"name": "icon2", "content": "<svg>...</svg>"} 336 ], 337 "output": "javascript" // or "css" or "json" 338}'`}),"\n",(0,a.jsx)(s.h2,{children:"Conclusion"}),"\n",(0,a.jsx)(s.p,{children:"SVG to Base64 encoding is a powerful technique for eliminating HTTP requests and creating self-contained web applications. While it increases file size, the performance benefits for critical-path resources and the convenience for email templates and API responses make it an essential tool in modern web development."}),"\n",(0,a.jsx)(s.p,{children:"Our converter provides intelligent encoding options, automatic optimization, and multiple output formats to seamlessly integrate Base64 SVGs into your workflow."}),"\n",(0,a.jsxs)(r.Zp,{className:"p-6 my-8 bg-gradient-to-r from-orange-500 to-red-500 text-white",children:[(0,a.jsx)("h3",{className:"text-xl font-bold mb-4",children:"\uD83D\uDE80 Encode Your SVGs Now"}),(0,a.jsx)("p",{className:"mb-4",children:"Convert SVGs to Base64 for zero-request, self-contained graphics."}),(0,a.jsxs)("div",{className:"flex gap-4",children:[(0,a.jsx)("button",{className:"px-6 py-2 bg-white text-orange-600 rounded-lg hover:bg-gray-100",children:(0,a.jsx)(s.p,{children:"Start Encoding"})}),(0,a.jsx)("button",{className:"px-6 py-2 border-2 border-white rounded-lg hover:bg-white/10",children:(0,a.jsx)(s.p,{children:"View Examples"})})]})]})]})}function u(e={}){let{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(x,{...e})}):x(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.