SVG ToolsLesson 185Free preview

SVG to Data URI

This lesson is part of Web Developer Tools · All levels

Summary

SVG to Data URI converts SVG code to data URI:image/svg+xml that can be directly pasted in HTML or CSS. URI data eliminates one HTTP request, but magnifies the size of the document and is not cached separately. For small SVGs like icons, this approach is practical; for large images, separate files are more efficient.

Key points

URI data format: data:image/svg+xml, followed by SVG content
Special characters must be URL-encoded, including # to %23
Base64 is also usable, but usually larger.
URI data is not cached as a separate resource
Suitable for small icons, less suitable for large illustrations

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.