Skip to content

Instantly share code, notes, and snippets.

View Arecsu's full-sized avatar
🍪
Baking some cookies

Alejandro Romano Arecsu

🍪
Baking some cookies
View GitHub Profile
@Arecsu
Arecsu / README.md
Created August 25, 2023 18:03 — forked from jennyknuth/README.md
Transform an SVG into a data URI—best practice

How to transform an SVG into a data URI

by Jenny Knuth, based on the work of Chris Coyier and Taylor Hunt

A data URI is a nice way to include a web resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in Probably Don't Base64 SVG.

While a PNG might use Base64 encoding, for SVG, there is a better way.

Taylor Hunt's experiments led to this solution for optimizing SVGs in data URIs:

"So the best way of encoding SVG in a data URI is data:image/svg+xml,[actual data]. We don’t need the ;charset=utf-8 parameter (or the invalid ;utf8 parameter…), because URLs are always ASCII."