0kenx · January 15, 2024 02:02 · Mar 6, 2018 · Feb 20, 2018 · Feb 20, 2018 · Feb 20, 2018
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # 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](https://css-tricks.com/probably-dont-base64-svg/).
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # How to transform an SVG into a data URI
 
-Using 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](https://css-tricks.com/probably-dont-base64-svg/).
+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](https://css-tricks.com/probably-dont-base64-svg/).
 
 While a PNG might use Base64 encoding, for SVG, there is a better way.
 

diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+# How to transform an SVG into a data URI
+
 Using 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](https://css-tricks.com/probably-dont-base64-svg/).
 
 While a PNG might use Base64 encoding, for SVG, there is a better way.

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Here is a step-by-step method to create your encoded SVG string to include as a
 
 1. Replace all non-ASCII and URL-unsafe characters by running your SVG string through an encoding function like the one below by Taylor Hunt—surround your `svgString` with double quotes in the function's argument.
 
-1. Paste your encoded SVG into your HTML tag's `src` attribute or CSS's url call using double quotes, after the `data:image/sg+xml,` prefix.
+1. Paste your encoded SVG into your HTML tag's `src` attribute or CSS's `url` call using double quotes, after the `data:image/sg+xml,` prefix.
 
 Examples: 
 

diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ HTML:
 CSS: 
 
 ```css
-.image {
+.logo {
   background: url("data:image/svg+xml,%3Csvg ... /svg%3E");
 }
 ```

diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ HTML:
 CSS: 
 
 ```css
-.bg {
+.image {
   background: url("data:image/svg+xml,%3Csvg ... /svg%3E");
 }
 ```

diff --git a/README.md b/README.md
@@ -8,13 +8,13 @@ Taylor Hunt's experiments led to this solution for [optimizing SVGs in data URIs
 
 Here is a step-by-step method to create your encoded SVG string to include as a data URI: 
 
-1. run your SVG file through [svgo](https://github.com/svg/svgo) to optimize. (Directions are found at the svgo link.) 
+1. Run your SVG file through [svgo](https://github.com/svg/svgo) to optimize. (Directions are found at the svgo link.) 
 
 1. In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks. 
 
-1. Replace all non-ASCII and URL-unsafe characters by running your SVG string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
+1. Replace all non-ASCII and URL-unsafe characters by running your SVG string through an encoding function like the one below by Taylor Hunt—surround your `svgString` with double quotes in the function's argument.
 
-1. Paste your encoded SVG into your html tag's `src` attribute or css's url call using double quotes, after the `data:image/sg+xml,` prefix.
+1. Paste your encoded SVG into your HTML tag's `src` attribute or CSS's url call using double quotes, after the `data:image/sg+xml,` prefix.
 
 Examples: 
 

diff --git a/README.md b/README.md
@@ -31,5 +31,6 @@ CSS:
   background: url("data:image/svg+xml,%3Csvg ... /svg%3E");
 }
 ```
+The `%3svg` starts your encoded string and the `svg%3E` ends your encoded string. 
 
 Let me know if any questions.
diff --git a/README.md b/README.md
@@ -8,11 +8,11 @@ Taylor Hunt's experiments led to this solution for [optimizing SVGs in data URIs
 
 Here is a step-by-step method to create your encoded SVG string to include as a data URI: 
 
-1. run your SVG file through [svgo](https://github.com/svg/svgo).
+1. run your SVG file through [svgo](https://github.com/svg/svgo) to optimize. (Directions are found at the svgo link.) 
 
 1. In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks. 
 
-1. Replace all non-ASCII and URL-unsafe characters by running your svg string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
+1. Replace all non-ASCII and URL-unsafe characters by running your SVG string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
 
 1. Paste your encoded SVG into your html tag's `src` attribute or css's url call using double quotes, after the `data:image/sg+xml,` prefix.
 

diff --git a/README.md b/README.md
@@ -8,13 +8,13 @@ Taylor Hunt's experiments led to this solution for [optimizing SVGs in data URIs
 
 Here is a step-by-step method to create your encoded SVG string to include as a data URI: 
 
-- 1 run your SVG file through [svgo](https://github.com/svg/svgo).
+1. run your SVG file through [svgo](https://github.com/svg/svgo).
 
-- 2 In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks. 
+1. In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks. 
 
-- 2 Replace all non-ASCII and URL-unsafe characters by running your svg string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
+1. Replace all non-ASCII and URL-unsafe characters by running your svg string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
 
-- 1 Paste your encoded SVG into your html tag's `src` attribute or css's url call using double quotes, after the `data:image/sg+xml,` prefix.
+1. Paste your encoded SVG into your html tag's `src` attribute or css's url call using double quotes, after the `data:image/sg+xml,` prefix.
 
 Examples: 
 

diff --git a/README.md b/README.md
@@ -4,9 +4,9 @@ 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](https://codepen.io/tigt/post/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."
+"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."
 
-Here is a step-by-step method to create your encoded SVG string: 
+Here is a step-by-step method to create your encoded SVG string to include as a data URI: 
 
 - 1 run your SVG file through [svgo](https://github.com/svg/svgo).
 

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@ Using a data URI is a nice way to include a web resource without needing to make
 
 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](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris): 
+Taylor Hunt's experiments led to this solution for [optimizing SVGs in data URIs](https://codepen.io/tigt/post/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."
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Using a data uri is a nice way to include a resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in [Probably Don't Base64 SVG](https://css-tricks.com/probably-dont-base64-svg/).
+Using 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](https://css-tricks.com/probably-dont-base64-svg/).
 
 While a PNG might use Base64 encoding, for SVG, there is a better way.
 

diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+Using a data uri is a nice way to include a resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in [Probably Don't Base64 SVG](https://css-tricks.com/probably-dont-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](https://codepen.io/tigt/post/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."
+
+Here is a step-by-step method to create your encoded SVG string: 
+
+- 1 run your SVG file through [svgo](https://github.com/svg/svgo).
+
+- 2 In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks. 
+
+- 2 Replace all non-ASCII and URL-unsafe characters by running your svg string through an encoding function like the one below—surround your `svgString` with double quotes in the function's argument.
+
+- 1 Paste your encoded SVG into your html tag's `src` attribute or css's url call using double quotes, after the `data:image/sg+xml,` prefix.
+
+Examples: 
+
+HTML: 
+
+```html
+<img src="data:image/svg+xml,%3Csvg width='247' height='34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFF' fill-rule='non.zero'%3E%3Cpath d='M13.918 ... 4.022-2.888 4.57V26h-4.46V7.975z' fill='%23D7DCE1'/%3E%3C/g%3E%3C/svg%3E"/>
+```
+
+CSS: 
+
+```css
+.bg {
+  background: url("data:image/svg+xml,%3Csvg ... /svg%3E");
+}
+```
+
+Let me know if any questions.
diff --git a/encodeSvg.js b/encodeSvg.js
@@ -0,0 +1,32 @@
+// this function is from the work of Taylor Hunt found at https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
+
+function encodeSvg(svgString) {
+  return svgString.replace('<svg',(~svgString.indexOf('xmlns')?'<svg':'<svg xmlns="http://www.w3.org/2000/svg"'))
+
+        //
+        //   Encode (may need a few extra replacements)
+        //
+        .replace(/"/g, '\'')
+        .replace(/%/g, '%25')
+        .replace(/#/g, '%23')       
+        .replace(/{/g, '%7B')
+        .replace(/}/g, '%7D')         
+        .replace(/</g, '%3C')
+        .replace(/>/g, '%3E')
+
+        .replace(/\s+/g,' ') 
+        // 
+        //    The maybe list (add on documented fail)
+        // 
+        //  .replace(/&/g, '%26')
+        //  .replace('|', '%7C')
+        //  .replace('[', '%5B')
+        //  .replace(']', '%5D')
+        //  .replace('^', '%5E')
+        //  .replace('`', '%60')
+        //  .replace(';', '%3B')
+        //  .replace('?', '%3F')
+        //  .replace(':', '%3A')
+        //  .replace('@', '%40')
+        //  .replace('=', '%3D')
+  ;}