0
# Data URI Utilities
1

2
SVG Data URI encoding and decoding utilities for converting SVG strings to and from various Data URI formats (base64, URL-encoded, unencoded).
3

4
## Capabilities
5

6
### Encode SVG Data URI
7

8
Convert SVG strings to Data URI format.
9

10
```javascript { .api }
11
/**
12
 * Encode plain SVG data string into Data URI string
13
 * @param str - SVG string to encode
14
 * @param type - Data URI encoding type (default: 'base64')
15
 * @returns Data URI string
16
 */
17
function encodeSVGDatauri(str: string, type?: DataUri): string;
18

19
type DataUri = 'base64' | 'enc' | 'unenc';
20
```
21

22
**Usage Examples:**
23

24
```javascript
25
import { encodeSVGDatauri } from "svgo";
26

27
const svgString = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>';
28

29
// Base64 encoding (default)
30
const base64Uri = encodeSVGDatauri(svgString);
31
// Result: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+"
32

33
const base64UriExplicit = encodeSVGDatauri(svgString, 'base64');
34
// Same as above
35

36
// URL encoded
37
const encodedUri = encodeSVGDatauri(svgString, 'enc');
38
// Result: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22/%3E%3C/svg%3E"
39

40
// Unencoded (raw)
41
const rawUri = encodeSVGDatauri(svgString, 'unenc');
42
// Result: "data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>"
43
```
44

45
### Decode SVG Data URI
46

47
Convert Data URI strings back to plain SVG.
48

49
```javascript { .api }
50
/**
51
 * Decode SVG Data URI string into plain SVG string
52
 * @param str - Data URI string to decode
53
 * @returns Plain SVG string
54
 */
55
function decodeSVGDatauri(str: string): string;
56
```
57

58
**Usage Examples:**
59

60
```javascript
61
import { decodeSVGDatauri } from "svgo";
62

63
// Decode base64 Data URI
64
const base64Uri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+";
65
const svgFromBase64 = decodeSVGDatauri(base64Uri);
66
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'
67

68
// Decode URL encoded Data URI
69
const encodedUri = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22/%3E%3C/svg%3E";
70
const svgFromEncoded = decodeSVGDatauri(encodedUri);
71
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'
72

73
// Decode unencoded Data URI
74
const rawUri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>';
75
const svgFromRaw = decodeSVGDatauri(rawUri);
76
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'
77

78
// If input is not a Data URI, returns the input unchanged
79
const plainSvg = '<svg><rect/></svg>';
80
const unchanged = decodeSVGDatauri(plainSvg);
81
// Result: '<svg><rect/></svg>' (unchanged)
82
```
83

84
### Data URI Types
85

86
Different encoding formats for SVG Data URIs.
87

88
```javascript { .api }
89
type DataUri = 'base64' | 'enc' | 'unenc';
90
```
91

92
**Base64 Encoding (`'base64'`):**
93
- Most compact for binary-like content
94
- Universally supported
95
- Good for embedding in CSS or HTML
96
- Default encoding type
97

98
```javascript
99
const base64 = encodeSVGDatauri(svgString, 'base64');
100
// "data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."
101
```
102

103
**URL Encoding (`'enc'`):**
104
- URL-safe encoding
105
- Good for use in URLs and web contexts
106
- More readable than base64 but longer
107

108
```javascript
109
const encoded = encodeSVGDatauri(svgString, 'enc');
110
// "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A..."
111
```
112

113
**Unencoded (`'unenc'`):**
114
- Plain SVG with minimal escaping
115
- Most readable format
116
- May have compatibility issues in some contexts
117
- Best for debugging
118

119
```javascript
120
const unencoded = encodeSVGDatauri(svgString, 'unenc');
121
// "data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">..."
122
```
123

124
### Integration with Optimize
125

126
Use Data URI utilities with the main optimization function.
127

128
```javascript { .api }
129
interface Config {
130
  /** Output as Data URI string */
131
  datauri?: DataUri;
132
}
133
```
134

135
**Usage Examples:**
136

137
```javascript
138
import { optimize } from "svgo";
139

140
// Direct Data URI output from optimize
141
const result = optimize(svgString, {
142
  datauri: 'base64',
143
  plugins: ['preset-default']
144
});
145
// result.data is already a Data URI
146

147
// Manual encoding after optimization
148
import { optimize, encodeSVGDatauri } from "svgo";
149

150
const optimized = optimize(svgString, {
151
  plugins: ['preset-default']
152
});
153
const dataUri = encodeSVGDatauri(optimized.data, 'enc');
154
```
155

156
### Practical Use Cases
157

158
Common scenarios for Data URI encoding/decoding.
159

160
**CSS Background Images:**
161

162
```javascript
163
import { optimize, encodeSVGDatauri } from "svgo";
164

165
// Optimize and encode for CSS
166
const svgIcon = '<svg>...</svg>';
167
const optimized = optimize(svgIcon, {
168
  plugins: ['preset-default']
169
});
170
const cssDataUri = encodeSVGDatauri(optimized.data, 'enc');
171

172
// Use in CSS
173
const css = `
174
  .icon {
175
    background-image: url("${cssDataUri}");
176
  }
177
`;
178
```
179

180
**HTML Inline Images:**
181

182
```javascript
183
import { optimize, encodeSVGDatauri } from "svgo";
184

185
// Create inline image
186
const svgContent = '<svg>...</svg>';
187
const optimized = optimize(svgContent);
188
const imgSrc = encodeSVGDatauri(optimized.data, 'base64');
189

190
// Use in HTML
191
const html = `<img src="${imgSrc}" alt="Icon">`;
192
```
193

194
**Processing External Data URIs:**
195

196
```javascript
197
import { decodeSVGDatauri, optimize, encodeSVGDatauri } from "svgo";
198

199
// Process existing Data URI
200
const existingDataUri = "data:image/svg+xml;base64,...";
201

202
// Decode, optimize, and re-encode
203
const plainSvg = decodeSVGDatauri(existingDataUri);
204
const optimized = optimize(plainSvg, {
205
  plugins: ['preset-default']
206
});
207
const newDataUri = encodeSVGDatauri(optimized.data, 'base64');
208
```
209

210
**Batch Processing:**
211

212
```javascript
213
import { optimize, encodeSVGDatauri, decodeSVGDatauri } from "svgo";
214

215
function processDataUris(dataUris) {
216
  return dataUris.map(uri => {
217
    // Decode if it's a Data URI, otherwise use as-is
218
    const svgContent = uri.startsWith('data:') ? decodeSVGDatauri(uri) : uri;
219
    
220
    // Optimize
221
    const optimized = optimize(svgContent, {
222
      multipass: true,
223
      plugins: ['preset-default']
224
    });
225
    
226
    // Re-encode
227
    return encodeSVGDatauri(optimized.data, 'base64');
228
  });
229
}
230

231
const uris = [
232
  'data:image/svg+xml;base64,...',
233
  '<svg>...</svg>',  // Plain SVG
234
  'data:image/svg+xml,%3Csvg...'
235
];
236

237
const processed = processDataUris(uris);
238
```
239

240
### Error Handling
241

242
Data URI utilities handle malformed input gracefully.
243

244
```javascript
245
import { decodeSVGDatauri, encodeSVGDatauri } from "svgo";
246

247
// decodeSVGDatauri returns input unchanged if not a valid Data URI
248
const notADataUri = '<svg><rect/></svg>';
249
const decoded = decodeSVGDatauri(notADataUri);
250
console.log(decoded === notADataUri); // true
251

252
// encodeSVGDatauri always produces valid Data URI
253
const emptyString = '';
254
const encoded = encodeSVGDatauri(emptyString, 'base64');
255
console.log(encoded); // "data:image/svg+xml;base64,"
256

257
// Handle invalid encoding types
258
try {
259
  const invalid = encodeSVGDatauri(svgString, 'invalid'); // TypeScript will catch this
260
} catch (error) {
261
  console.error('Invalid encoding type');
262
}
263
```