├── .gitignore
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
    ├── components
    │   ├── DumbTextarea.js
    │   ├── Example.js
    │   ├── FormTextarea.js
    │   ├── InlineCssSvgImage.js
    │   ├── SvgImage.js
    │   └── Textbox.js
    ├── pages
    │   ├── 404.js
    │   └── index.js
    ├── static
    │   └── test.html
    └── styles
    │   └── global.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .cache/
3 | public
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <div id="top"></div>
  4 | 
  5 | <div align="center">
  6 | 
  7 | 
  8 | <img src="https://svg-rewriter.sachinraja.workers.dev/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2F%40mdi%2Fsvg%406.7.96%2Fsvg%2Fsvg.svg&fill=%23FCD34D&width=200px&height=200px" style="width:200px;"/>
  9 | 
 10 | <h3 align="center">SVGEncoder.com Website</h3>
 11 | 
 12 | <p align="center">
 13 | Convert your SVG to common encodings for CSS & HTML.
 14 | </p>    
 15 | </div>
 16 | 
 17 | ##  1. <a name='TableofContents'></a>Table of Contents
 18 | 
 19 | 
 20 | * 1. [Table of Contents](#TableofContents)
 21 | * 2. [About The Project](#AboutTheProject)
 22 | 	* 2.1. [Built With](#BuiltWith)
 23 | 	* 2.2. [Installation](#Installation)
 24 | * 3. [Usage](#Usage)
 25 | 	* 3.1. [Current Encode List](#CurrentEncodeList)
 26 | 	* 3.2. [Tools](#Tools)
 27 | * 4. [ Customising](#Customising)
 28 | * 5. [Troubleshooting](#Troubleshooting)
 29 | * 6. [Contributing](#Contributing)
 30 | * 7. [License](#License)
 31 | * 8. [Contact](#Contact)
 32 | * 9. [Changelog](#Changelog)
 33 | 
 34 | 
 35 | ##  2. <a name='AboutTheProject'></a>About The Project
 36 | 
 37 | [SVGEncode.com](https://SVGEncode.com)
 38 | 
 39 | This is just a small little one-day project to learn gatsby with netlify. I'm always using yoksel's [https://yoksel.github.io/url-encoder/](https://yoksel.github.io/url-encoder/) project, but I sometimes need the result in a Base64 encoded format with a backgroung-image. 
 40 | 
 41 | So I thought whis might be a good little project to implement.
 42 | 
 43 | <p align="right">(<a href="#top">back to top</a>)</p>
 44 | 
 45 | 
 46 | ###  2.1. <a name='BuiltWith'></a>Built With
 47 | 
 48 | This project was built with the following frameworks, technologies and software.
 49 | 
 50 | - [Gatsby](https://www.gatsbyjs.com/)
 51 | 
 52 | <p align="right">(<a href="#top">back to top</a>)</p>
 53 | 
 54 | 
 55 | ###  2.2. <a name='Installation'></a>Installation
 56 | 
 57 | These are the steps to get up and running.
 58 | 
 59 | 1. Clone the repo 
 60 |     ```sh
 61 |     git clone https://github.com/IORoot/SVGencode
 62 |     ```
 63 | 2. Install package.json
 64 |     ```sh
 65 |     npm install
 66 |     ```
 67 | 3. Run gatsby
 68 |     ```sh
 69 |     gatsby clean && gatsby develop
 70 |     ```
 71 | 
 72 | 
 73 | <p align="right">(<a href="#top">back to top</a>)</p>
 74 | 
 75 | 
 76 | ##  3. <a name='Usage'></a>Usage
 77 | 
 78 | ###  3.1. <a name='CurrentEncodeList'></a>Current Encode List
 79 | The current list of conversions are:
 80 | 
 81 | - URL-Encoded (Quotes and Spaces excluded)
 82 | - URL-Encoded CSS background-image:url()
 83 | - URL-Encoded &#60;Img&#62; Tag
 84 | - URL-Encoded &#60;Object&#62; Tag
 85 | - BASE64-Encoded (Quotes and Spaces excluded)
 86 | - BASE64-Encoded CSS background-image:url()
 87 | - BASE64-Encoded &#60;Img&#62; Tag
 88 | - BASE64-Encoded &#60;Object&#62; Tag
 89 | - Encoded with Javascript encodeURI()
 90 | - Encoded with Javascript encodeURIComponent()
 91 | 
 92 | ###  3.2. <a name='Tools'></a>Tools
 93 | There are some extra functions that are useful for manipulating SVGs
 94 | 
 95 | - One-liner. Removes all new-lines and whitespace.
 96 | - Single-Quotes. Switch any double-quotes for singles.
 97 | - Double-Quotes. Switch any single-quotes for doubles.
 98 | - No Colour. Removes the following attributes:
 99 |     - `fill=""` 
100 |     - `fill-rule=""`
101 |     - `stroke=""`
102 |     - `stroke-width=""`
103 | - No Transforms. Removes all `transform=""` attribute.
104 | - No Groups. Removes all group `<g>` and `</g>` tags.
105 | 
106 | 
107 | ##  4. <a name='Customising'></a> Customising
108 | 
109 | None.
110 | 
111 | ##  5. <a name='Troubleshooting'></a>Troubleshooting
112 | 
113 | None
114 | 
115 | <p align="right">(<a href="#top">back to top</a>)</p>
116 | 
117 | 
118 | ##  6. <a name='Contributing'></a>Contributing
119 | 
120 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
121 | 
122 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue.
123 | Don't forget to give the project a star! Thanks again!
124 | 
125 | 1. Fork the Project
126 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
127 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
128 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
129 | 5. Open a Pull Request
130 | 
131 | <p align="right">(<a href="#top">back to top</a>)</p>
132 | 
133 | 
134 | 
135 | ##  7. <a name='License'></a>License
136 | 
137 | Distributed under the MIT License.
138 | 
139 | MIT License
140 | 
141 | Copyright (c) 2022 Andy Pearson
142 | 
143 | Permission is hereby granted, free of charge, to any person obtaining a copy
144 | of this software and associated documentation files (the "Software"), to deal
145 | in the Software without restriction, including without limitation the rights
146 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
147 | copies of the Software, and to permit persons to whom the Software is
148 | furnished to do so, subject to the following conditions:
149 | 
150 | The above copyright notice and this permission notice shall be included in all
151 | copies or substantial portions of the Software.
152 | 
153 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
154 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
155 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
156 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
157 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
158 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
159 | SOFTWARE.
160 | 
161 | <p align="right">(<a href="#top">back to top</a>)</p>
162 | 
163 | 
164 | 
165 | ##  8. <a name='Contact'></a>Contact
166 | 
167 | Author Link: [https://github.com/IORoot](https://github.com/IORoot)
168 | 
169 | <p align="right">(<a href="#top">back to top</a>)</p>
170 | 
171 | ##  9. <a name='Changelog'></a>Changelog
172 | 
173 | v1.0.0 - First version.
174 | 


--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's Browser APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.com/docs/browser-apis/
5 |  */
6 | 
7 | import './src/styles/global.css'


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: `SVGConverter`,
 4 |     siteUrl: `https://www.yourdomain.tld`,
 5 |   },
 6 |   plugins: [
 7 |     'gatsby-plugin-postcss',
 8 |     `gatsby-plugin-react-helmet`
 9 |   ],
10 | }
11 | 


--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IORoot/SVGencode/7c031a0c866556e06b104ac20c7a01f066d799f0/gatsby-ssr.js


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svgconverter",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "svgconverter",
 6 |   "author": "Andy Pearson",
 7 |   "keywords": [
 8 |     "gatsby"
 9 |   ],
10 |   "scripts": {
11 |     "develop": "gatsby develop",
12 |     "start": "gatsby develop",
13 |     "build": "rm -rf .cache/gatsby-source-git/ && gatsby build",
14 |     "serve": "gatsby serve",
15 |     "clean": "gatsby clean"
16 |   },
17 |   "dependencies": {
18 |     "@tailwindcss/typography": "^0.5.2",
19 |     "gatsby": "^4.15.2",
20 |     "gatsby-plugin-react-helmet": "^5.16.0",
21 |     "mixpanel-browser": "^2.45.0",
22 |     "react": "^18.1.0",
23 |     "react-dom": "^18.1.0",
24 |     "react-helmet": "^6.1.0"
25 |   },
26 |   "devDependencies": {
27 |     "autoprefixer": "^10.4.7",
28 |     "gatsby-plugin-postcss": "^5.15.0",
29 |     "postcss": "^8.4.14",
30 |     "prettier": "^2.6.2",
31 |     "tailwindcss": "^3.0.24"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/DumbTextarea.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | class DumbTextarea extends React.Component {
 4 | 
 5 |     handleChange(event) {
 6 |         
 7 |     }
 8 | 
 9 |     render() {
10 |         const content = this.props.content;
11 |         
12 |         return (
13 |             <div className={this.props.className + " relative"}>
14 |                 <label htmlFor={this.props.id} className="block text-sm font-medium text-gray-900">{this.props.label}</label>
15 |                 <p className="block text-xs text-blue-700 mb-2">{this.props.children}</p>
16 |                 <textarea value={content} onChange={this.handleChange} id={this.props.id} rows={this.props.rows} className="block p-2.5 w-full text-xxs text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Generated"/>
17 |                 <div className="w-4 h-4 fill-slate-300 absolute right-0 top-5 hover:fill-blue-500 active:fill-red-500" role="button" tabIndex="0" onClick={() => {navigator.clipboard.writeText(content)}} onKeyDown={() => {navigator.clipboard.writeText(content)}}>
18 |                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg>
19 |                 </div>
20 |             </div>
21 |         );
22 |     }
23 | }
24 | 
25 | export default DumbTextarea


--------------------------------------------------------------------------------
/src/components/Example.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import DumbTextarea from "../components/DumbTextarea"
 3 | import InlineCssSvgImage from '../components/InlineCssSvgImage'
 4 | 
 5 | const Example = ({ label, sublabel, image, className, children }) => {
 6 | 
 7 |     return (
 8 |         <div className={className}>
 9 |             <DumbTextarea className="col-span-2" rows="3" label={label} content={children}>{sublabel}</DumbTextarea>
10 |             <InlineCssSvgImage className="col-span-1 h-18 checkered overflow-scroll rounded mt-10">{image}</InlineCssSvgImage>
11 |         </div>
12 |     )
13 | 
14 | }
15 | 
16 | export default Example 


--------------------------------------------------------------------------------
/src/components/FormTextarea.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | class FormTextarea extends React.Component {
 4 |     
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.handleChange = this.handleChange.bind(this);
 8 |     }
 9 | 
10 |     handleChange(event) {
11 |         this.props.onSvgChange(event.target.value);
12 |     }
13 | 
14 |     render() {
15 |         const svgRawCode = this.props.svgRawCode;
16 | 
17 |         return (
18 |             <div className={this.props.className }>
19 |                 <label htmlFor="SvgSourceTextarea" className="block mb-2 text-sm font-medium text-gray-900">{this.props.label}</label>
20 |                 <textarea value={svgRawCode} onChange={this.handleChange} id="SvgSourceTextarea" rows={this.props.rows}  className="block p-2.5 w-full text-sm text-gray-900 bg-blue-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Paste your SVG code here..."/>
21 |             </div>
22 |         );
23 |     }
24 | }
25 | 
26 | export default FormTextarea


--------------------------------------------------------------------------------
/src/components/InlineCssSvgImage.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | const InlineCssSvgImage = ({ className, children }) => {
 4 | 
 5 |     console.log(children)
 6 |     
 7 |     return (
 8 |         <div className={ className } style={{ backgroundImage: children}} />
 9 |     )
10 | }
11 | 
12 | 
13 | 
14 | export default InlineCssSvgImage


--------------------------------------------------------------------------------
/src/components/SvgImage.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | const SvgImage = ({ className, children }) => {
 4 | 
 5 |     function stripquotes(a) {
 6 |         if (a.charAt(0) === '"' && a.charAt(a.length-1) === '"') {
 7 |             return a.substr(1, a.length-2);
 8 |         }
 9 |         return a;
10 |     }
11 |     
12 |     var svg = decodeURI(children)
13 |     var svgout = stripquotes(svg); 
14 | 
15 |     return (
16 |         <div className={ className }
17 |             dangerouslySetInnerHTML={{__html: svgout}}
18 |         /> 
19 |     )
20 | }
21 | 
22 | 
23 | 
24 | export default SvgImage


--------------------------------------------------------------------------------
/src/components/Textbox.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | const Textbox = ({ className, children }) => {
 4 | 
 5 |     return (
 6 |         <div>
 7 |             <label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">SVG Image</label>
 8 |             <textarea id="message" rows="4" className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Paste your image here..."></textarea>
 9 |         </div>
10 |     )
11 | 
12 | }
13 | 
14 | export default Textbox 


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Link } from "gatsby"
 3 | 
 4 | // styles
 5 | const pageStyles = {
 6 |   color: "#232129",
 7 |   padding: "96px",
 8 |   fontFamily: "-apple-system, Roboto, sans-serif, serif",
 9 | }
10 | const headingStyles = {
11 |   marginTop: 0,
12 |   marginBottom: 64,
13 |   maxWidth: 320,
14 | }
15 | 
16 | const paragraphStyles = {
17 |   marginBottom: 48,
18 | }
19 | const codeStyles = {
20 |   color: "#8A6534",
21 |   padding: 4,
22 |   backgroundColor: "#FFF4DB",
23 |   fontSize: "1.25rem",
24 |   borderRadius: 4,
25 | }
26 | 
27 | // markup
28 | const NotFoundPage = () => {
29 |   return (
30 |     <main style={pageStyles}>
31 |       <title>Not found</title>
32 |       <h1 style={headingStyles}>Page not found</h1>
33 |       <p style={paragraphStyles}>
34 |         Sorry{" "}
35 |         <span role="img" aria-label="Pensive emoji">
36 |           😔
37 |         </span>{" "}
38 |         we couldn’t find what you were looking for.
39 |         <br />
40 |         {process.env.NODE_ENV === "development" ? (
41 |           <>
42 |             <br />
43 |             Try creating a page in <code style={codeStyles}>src/pages/</code>.
44 |             <br />
45 |           </>
46 |         ) : null}
47 |         <br />
48 |         <Link to="/">Go home</Link>.
49 |       </p>
50 |     </main>
51 |   )
52 | }
53 | 
54 | export default NotFoundPage
55 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import DumbTextarea from "../components/DumbTextarea"
  3 | import FormTextarea from "../components/FormTextarea"
  4 | import SvgImage from '../components/SvgImage'
  5 | import mixpanel from 'mixpanel-browser';
  6 | import { Helmet } from "react-helmet"
  7 | 
  8 | mixpanel.init('951229746a9235dd49749d8f6490ac83', {debug: true, ignore_dnt: true})
  9 | mixpanel.track('Website Visit')
 10 | 
 11 | function removeNewlines(svg){
 12 |   return svg.replace(/(\r\n|\n|\r)/gm, " ");  // New lines
 13 | }
 14 | 
 15 | function removeWhitespace(svg){
 16 |   svg = svg.replace(/>\s{1,}</g, `><`);      // One of more spaces between groups or tags
 17 |   return svg.replace(/\s{2,}/g, ` `);         // Double or more spaces
 18 | }
 19 | 
 20 | function regexEncode(svg){
 21 |   svg = svg.replace(/>\s{1,}</g, `><`);
 22 |   svg = svg.replace(/\s{2,}/g, ` `);
 23 |   return svg.replace(/[\r\n%#()<>?[\\\]^`{|}]/g, encodeURIComponent)
 24 | }
 25 | 
 26 | function prefixDataType(svg,type){
 27 |   return "data:image/svg+"+ type +"," + svg;
 28 | }
 29 | 
 30 | function prefixURLDoubleQuotes(svg){
 31 |   return "url(\"" + svg + "\")";
 32 | }
 33 | 
 34 | function prefixBackgroundImage(svg,type){
 35 |   svg = prefixDataType(svg,type)
 36 |   svg = prefixURLDoubleQuotes(svg)
 37 |   return 'background-image: ' + svg + ';';
 38 | }
 39 | 
 40 | function prefixIMG(svg,type){
 41 |   svg = prefixDataType(svg,type)
 42 |   return '<img src="' + svg + '">';
 43 | }
 44 | 
 45 | function prefixObject(svg,type){
 46 |   svg = prefixDataType(svg,type)
 47 |   return '<object type="image/svg+' + type + '" data="' + svg + '"></object>';
 48 | }
 49 | 
 50 | function doublesToSingles(svg){
 51 |   return svg.replace(/"/g, "'")
 52 | }
 53 | 
 54 | function singlesToDoubles(svg){
 55 |   return svg.replace(/'/g, "\"")
 56 | }
 57 | 
 58 | function removeColour(svg){
 59 |   svg = svg.replace(/fill=".*?"/g, "")
 60 |   svg = svg.replace(/stroke=".*?"/g, "")
 61 |   svg = svg.replace(/stroke-width=".*?"/g, "")
 62 |   return svg.replace(/fill-rule=".*?"/g, "") 
 63 | }
 64 | 
 65 | function removeTransforms(svg){
 66 |   return svg.replace(/transform=".*?"/g, "")
 67 | }
 68 | 
 69 | function removeGroups(svg){
 70 |   svg = svg.replace(/(<g.*?>|<\/g\s*?>)/g, "")
 71 |   svg = removeNewlines(svg)
 72 |   return removeWhitespace(svg)
 73 | }
 74 | 
 75 | function base64(svg){
 76 |   svg = doublesToSingles(svg)
 77 |   svg = removeWhitespace(svg)
 78 |   return btoa(svg)
 79 | }
 80 | 
 81 | 
 82 | class IndexPage extends React.Component {
 83 |   constructor(props) {
 84 |     super(props);
 85 |     this.handleSvgRawChange = this.handleSvgRawChange.bind(this);
 86 | 
 87 |     this.state = {
 88 |       svgRawCode              : '',
 89 | 
 90 |       svgUrlregexEncoded      : '',
 91 |       svgCSSReadyInline       : '',
 92 |       svgHTMLimg              : '',
 93 |       svgHTMLobject           : '',
 94 | 
 95 |       svgBase64Encoded        : '',
 96 |       svgCSSReadyInlineB64    : '',
 97 |       svgHTMLimgB64           : '',
 98 |       svgHTMLobjectB64        : '',
 99 | 
100 |       svgRawCodeOneLine       : '',
101 |       svgRawSingleQuotes      : '',
102 |       svgRawDoubleQuotes      : '',
103 |       svgRawCodeNoColour      : '',
104 |       svgRawCodeNoTransforms  : '',
105 |       svgRawCodeNoGroups      : '',
106 | 
107 |       svgEncodedUri           : '',
108 |       svgUrlComponentEncoded  : '',
109 | 
110 |     };
111 |   }
112 | 
113 |   
114 | 
115 |   handleSvgRawChange(svg) {
116 | 
117 |     /** Raw Code */
118 |     this.setState({svgRawCode:              svg});
119 | 
120 |     /** URL-Encoded */
121 |     this.setState({svgUrlregexEncoded:      regexEncode(svg)});
122 |     this.setState({svgCSSReadyInline:       prefixBackgroundImage(regexEncode(doublesToSingles(svg)), 'xml')  });
123 |     this.setState({svgHTMLimg:              prefixIMG(regexEncode(doublesToSingles(svg)), 'xml')  });
124 |     this.setState({svgHTMLobject:           prefixObject(regexEncode(doublesToSingles(svg)), 'xml')  });
125 | 
126 |     /** Base64 Encoded */
127 |     this.setState({svgBase64Encoded:        base64(svg)});
128 |     this.setState({svgCSSReadyInlineB64:    prefixBackgroundImage(base64(doublesToSingles(svg)), 'xml;base64')  });
129 |     this.setState({svgHTMLimgB64:           prefixIMG(base64(doublesToSingles(svg)), 'xml;base64')  });
130 |     this.setState({svgHTMLobjectB64:        prefixObject(base64(doublesToSingles(svg)), 'xml;base64')  });
131 | 
132 |     /** Alterations */
133 |     this.setState({svgRawCodeOneLine:       removeNewlines(removeWhitespace(svg))});
134 |     this.setState({svgRawSingleQuotes:      doublesToSingles(svg)});
135 |     this.setState({svgRawDoubleQuotes:      singlesToDoubles(svg)});
136 |     this.setState({svgRawCodeNoColour:      removeColour(svg)});
137 |     this.setState({svgRawCodeNoTransforms:  removeTransforms(svg)});
138 |     this.setState({svgRawCodeNoGroups:      removeGroups(svg)});
139 | 
140 |     /** Other Encodings */
141 |     this.setState({svgEncodedUri:           encodeURI(svg)});
142 |     this.setState({svgUrlComponentEncoded:  encodeURIComponent(svg)});
143 |   }
144 | 
145 | 
146 |   render() {
147 | 
148 |     return (
149 |       <main>
150 | 
151 |         <Helmet htmlAttributes={{ lang: 'en',}}>
152 |           <meta charSet="utf-8" />
153 |           <title>SVG Encoder</title>
154 |           <link rel="canonical" href="http://svgencode.com" />
155 |           <meta name="description" content="SVG URI-Encoder and Base64 Converter Tool." />
156 |         </Helmet>
157 | 
158 |         
159 |         
160 |         <div className="w-full flex flex-col lg:flex-row min-h-screen">
161 | 
162 |           <div className="w-full lg:w-1/6 p-4 bg-slate-100">
163 |               <div className="sticky top-0 p-4 w-full h-full flex flex-col gap-8">
164 |                   <h1 className="">⚙️ SVG Encoder / Converter</h1>
165 | 
166 |                   <h2 className="text-sm">
167 |                     A simple tool to convert an SVG into different formats, ready for use in CSS and HTML.
168 |                   </h2>
169 | 
170 |                   <a className="hover:fill-blue-800 fill-black" href="https://github.com/IORoot/SVGencode">
171 |                     <svg role="img" width="2rem" height="2rem" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
172 |                   </a>
173 | 
174 |                   <p className="text-xxs mt-auto">Created by Andy Pearson (IORoot) 2022.</p>
175 |               </div>
176 |           </div>
177 | 
178 | 
179 |           <div role="main" className="w-full lg:w-4/6 p-4 grid grid-cols-4 gap-6 auto-rows-auto mb-auto">
180 | 
181 |               {/* Input */}
182 |               <FormTextarea className="col-span-4 lg:col-span-3" onSvgChange={this.handleSvgRawChange} rows="7" label="SVG Raw Code"></FormTextarea>
183 |               
184 |               {/* Image */}
185 |               <div className="col-span-full lg:col-span-1 flex sm:flex-col px-2">
186 |                   <h3 className="mb-2 text-sm font-medium text-gray-900">SVG Preview</h3>
187 |                   <SvgImage className="w-full h-40 checkered overflow-scroll rounded">{this.state.svgRawCode}</SvgImage>
188 |               </div>
189 | 
190 | 
191 |             <h3 className="col-span-4 text-xl text-blue-900 border-b-2 border-blue-900">URL-Encoding</h3>
192 | 
193 |               {/* URL Encoding without spaces */}
194 |               <DumbTextarea id="svgUrlregexEncoded" className="col-span-2 lg:col-span-1" label="URL-Encoded" rows="3" content={this.state.svgUrlregexEncoded}>Spaces excluded.</DumbTextarea>
195 | 
196 |               {/* CSS Inline URL-Encoded */}
197 |               <DumbTextarea id="svgCSSReadyInline" className="col-span-2 lg:col-span-1" label="URL-Encoded CSS " rows="3" content={this.state.svgCSSReadyInline}>background-image:url()</DumbTextarea>
198 | 
199 |               {/* HTML Image URL-Encoded */}
200 |               <DumbTextarea id="svgHTMLimg" className="col-span-2 lg:col-span-1" label="URL-Encoded <img>" rows="3" content={this.state.svgHTMLimg}> &#60;img src="" &#62; </DumbTextarea>
201 | 
202 |               {/* HTML Object URL-Encoded */}
203 |               <DumbTextarea id="svgHTMLobject" className="col-span-2 lg:col-span-1" label="URL-Encoded <object>" rows="3" content={this.state.svgHTMLobject}> &#60;object type="" data="" &#62; </DumbTextarea>
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 |             <h3 className="col-span-4 text-xl text-blue-900 border-b-2 border-blue-900">Base64 Encoded</h3>
212 | 
213 |               {/* Base64 Encoded */}
214 |               <DumbTextarea id="svgBase64Encoded" className="col-span-2 lg:col-span-1" label="Base64 Encoded" rows="3" content={this.state.svgBase64Encoded}>Single-quotes and Whitespace removed</DumbTextarea>
215 | 
216 |               {/* CSS Inline Base64 */}
217 |               <DumbTextarea id="svgCSSReadyInlineB64" className="col-span-2 lg:col-span-1" label="Base64 Encoded CSS" rows="3" content={this.state.svgCSSReadyInlineB64}>background-image:url()</DumbTextarea>
218 | 
219 |               {/* HTML Image Base64-Encoded */}
220 |               <DumbTextarea id="svgHTMLimgB64" className="col-span-2 lg:col-span-1" label="Base64 Encoded <img>" rows="3" content={this.state.svgHTMLimgB64}> &#60;img src="" &#62; </DumbTextarea>
221 |               
222 |               {/* HTML Object Base64-Encoded */}
223 |               <DumbTextarea id="svgHTMLobjectB64" className="col-span-2 lg:col-span-1" label="Base64 Encoded <object>" rows="3" content={this.state.svgHTMLobjectB64}> &#60;object type="" data="" &#62; </DumbTextarea>
224 | 
225 | 
226 | 
227 | 
228 |             <h3 className="col-span-4 text-xl text-blue-900 border-b-2 border-blue-900">Alterations</h3>
229 | 
230 |               {/* One-Liner */}
231 |               <DumbTextarea id="svgRawCodeOneLine" className="col-span-2 lg:col-span-1" label="One-liner" rows="2" content={this.state.svgRawCodeOneLine}>Removed newlines and extra whitespace</DumbTextarea>
232 | 
233 |               {/* Single Quotes */}
234 |               <DumbTextarea id="svgRawSingleQuotes" className="col-span-2 lg:col-span-1" label="Single-Quotes" rows="2" content={this.state.svgRawSingleQuotes}>Convert all quotes to singles</DumbTextarea>
235 | 
236 |               {/* Double Quotes */}
237 |               <DumbTextarea id="svgRawDoubleQuotes" className="col-span-2 lg:col-span-1" label="Double-Quotes" rows="2" content={this.state.svgRawDoubleQuotes}>Convert all quotes to doubles</DumbTextarea>
238 | 
239 |               {/* No Colour */}
240 |               <DumbTextarea id="svgRawCodeNoColour" className="col-span-2 lg:col-span-1" label="No Colour" rows="2" content={this.state.svgRawCodeNoColour}>Removed All Fills and Strokes</DumbTextarea>
241 | 
242 |               {/* No Transforms */}
243 |               <DumbTextarea id="svgRawCodeNoTransforms" className="col-span-2 lg:col-span-1" label="No Transforms" rows="2" content={this.state.svgRawCodeNoTransforms}>Removed All Transforms</DumbTextarea>
244 | 
245 |               {/* No Groups */}
246 |               <DumbTextarea id="svgRawCodeNoGroups" className="col-span-2 lg:col-span-1" label="No Groups" rows="2" content={this.state.svgRawCodeNoGroups}>Removed All Groups</DumbTextarea>
247 | 
248 | 
249 | 
250 | 
251 |             <h3 className="col-span-4 text-xl text-blue-900 border-b-2 border-blue-900">Other Encodings</h3>
252 | 
253 |               {/* Encode using encodeURI() */}
254 |               <DumbTextarea id="svgEncodedUri" className="col-span-2 lg:col-span-1" label="Encode URI" rows="3" content={this.state.svgEncodedUri}>encodeURI(svg)</DumbTextarea>
255 | 
256 |               {/* Encode using encodeURIComponent() */}
257 |               <DumbTextarea id="svgUrlComponentEncoded" className="col-span-2 lg:col-span-1" label="Encode-URI Component" rows="3" content={this.state.svgUrlComponentEncoded}>encodeURIComponent(svg)</DumbTextarea>
258 | 
259 | 
260 | 
261 |           </div>
262 | 
263 |           <div className="w-1/6 grow shrink-0 p-4 bg-slate-200 flex flex-col gap-4" >
264 |             <iframe title="ad1" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style={{width: '120px', height: '240px'}} marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" src="//ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=londonparkour-21&language=en_GB&marketplace=amazon&region=GB&placement=B08GTYFC37&asins=B08GTYFC37&linkId=5d023d3ef7d25a1e7fe25c805de781e7&show_border=true&link_opens_in_new_window=true"></iframe>
265 |             <iframe title="ad2" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style={{width: '120px', height: '240px'}} marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" src="//ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=londonparkour-21&language=en_GB&marketplace=amazon&region=GB&placement=B08PVD4Y33&asins=B08PVD4Y33&linkId=104d2b03fe933bc76dd288160495feba&show_border=true&link_opens_in_new_window=true"></iframe>
266 |             <iframe title="ad3" sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style={{width: '120px', height: '240px'}} marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" src="//ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=GB&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=londonparkour-21&language=en_GB&marketplace=amazon&region=GB&placement=B09MT2W356&asins=B09MT2W356&linkId=60a391aa306ae2dbfb259a3fb4d9cae1&show_border=false&link_opens_in_new_window=true"></iframe>
267 |           </div>
268 |         </div>
269 | 
270 | 
271 |         <div className="bg-slate-800 text-slate-100 text-right text-xxs p-4">
272 |           <a href="https://github.com/IORoot/SVGconverter">Written by Andy Pearson (IORoot) 2022.</a>
273 |         </div>
274 | 
275 | 
276 |       </main>
277 |     );
278 |   }
279 | }
280 | 
281 | export default IndexPage
282 | 


--------------------------------------------------------------------------------
/src/static/test.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <style>
 4 |             .svg {
 5 |                 width: 200px;
 6 |                 height: 200px;
 7 |                 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzNiAzNic+PHBhdGggZmlsbD0nI0EwMDQxRScgZD0nTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnonIC8+PHBhdGggZmlsbD0nI0ZGQUMzMycgZD0nTS45NzMgMzVzLS4wMzYtNy45NzkgMi45ODUtMTFTMTUgMjEuMTg3IDE1IDIxLjE4NyAxNC45OTkgMjkgMTEuOTk5IDMyYy0zIDMtMTEuMDI2IDMtMTEuMDI2IDN6JyAvPjxjaXJjbGUgZmlsbD0nI0ZGQ0M0RCcgY3g9JzguOTk5JyBjeT0nMjcnIHI9JzQnIC8+PHBhdGggZmlsbD0nIzU1QUNFRScgZD0nTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnonIC8+PHBhdGggZD0nTTI2Ljk5OSA1Yy0xLjYyMyAwLTMuMDEzLjk3MS0zLjY0MSAyLjM2LjUwMi0uMjI3IDEuMDU1LS4zNiAxLjY0MS0uMzYgMi4yMDkgMCA0IDEuNzkxIDQgNCAwIC41ODYtLjEzMyAxLjEzOS0uMzU5IDEuNjQgMS4zODktLjYyNyAyLjM1OS0yLjAxNyAyLjM1OS0zLjY0IDAtMi4yMDktMS43OTEtNC00LTR6JyAvPjxwYXRoIGZpbGw9JyNBMDA0MUUnIGQ9J004IDI4czAtNCAxLTUgMTMuMDAxLTEwLjk5OSAxNC0xMC05LjAwMSAxMy0xMC4wMDEgMTRTOCAyOCA4IDI4eicgLz48L3N2Zz4=");
 8 | }
 9 |         </style>
10 |     </head>
11 |     <body>
12 |         <h1>Test</h1>
13 |         <h2>Image 1 (CSS Class)</h2>
14 |         <div class="svg"></div>
15 | 
16 |         <hr/>
17 |         <h2>Image 2 (IMG)</h2>
18 |         <div style="width:200px; height:200px;">
19 |             <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzNiAzNic+PHBhdGggZmlsbD0nI0EwMDQxRScgZD0nTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnonIC8+PHBhdGggZmlsbD0nI0ZGQUMzMycgZD0nTS45NzMgMzVzLS4wMzYtNy45NzkgMi45ODUtMTFTMTUgMjEuMTg3IDE1IDIxLjE4NyAxNC45OTkgMjkgMTEuOTk5IDMyYy0zIDMtMTEuMDI2IDMtMTEuMDI2IDN6JyAvPjxjaXJjbGUgZmlsbD0nI0ZGQ0M0RCcgY3g9JzguOTk5JyBjeT0nMjcnIHI9JzQnIC8+PHBhdGggZmlsbD0nIzU1QUNFRScgZD0nTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnonIC8+PHBhdGggZD0nTTI2Ljk5OSA1Yy0xLjYyMyAwLTMuMDEzLjk3MS0zLjY0MSAyLjM2LjUwMi0uMjI3IDEuMDU1LS4zNiAxLjY0MS0uMzYgMi4yMDkgMCA0IDEuNzkxIDQgNCAwIC41ODYtLjEzMyAxLjEzOS0uMzU5IDEuNjQgMS4zODktLjYyNyAyLjM1OS0yLjAxNyAyLjM1OS0zLjY0IDAtMi4yMDktMS43OTEtNC00LTR6JyAvPjxwYXRoIGZpbGw9JyNBMDA0MUUnIGQ9J004IDI4czAtNCAxLTUgMTMuMDAxLTEwLjk5OSAxNC0xMC05LjAwMSAxMy0xMC4wMDEgMTRTOCAyOCA4IDI4eicgLz48L3N2Zz4=">
20 |         </div>
21 | 
22 |         <hr/>
23 |         <h2>Image 3 (object)</h2>
24 |         <div style="width:200px; height:200px;">
25 |             <object type="image/svg+xml;base64" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzNiAzNic+PHBhdGggZmlsbD0nI0EwMDQxRScgZD0nTTEgMTdsOC03IDE2IDEgMSAxNi03IDhzLjAwMS01Ljk5OS02LTEyLTEyLTYtMTItNnonIC8+PHBhdGggZmlsbD0nI0ZGQUMzMycgZD0nTS45NzMgMzVzLS4wMzYtNy45NzkgMi45ODUtMTFTMTUgMjEuMTg3IDE1IDIxLjE4NyAxNC45OTkgMjkgMTEuOTk5IDMyYy0zIDMtMTEuMDI2IDMtMTEuMDI2IDN6JyAvPjxjaXJjbGUgZmlsbD0nI0ZGQ0M0RCcgY3g9JzguOTk5JyBjeT0nMjcnIHI9JzQnIC8+PHBhdGggZmlsbD0nIzU1QUNFRScgZD0nTTM1Ljk5OSAwcy0xMCAwLTIyIDEwYy02IDUtNiAxNC00IDE2czExIDIgMTYtNGMxMC0xMiAxMC0yMiAxMC0yMnonIC8+PHBhdGggZD0nTTI2Ljk5OSA1Yy0xLjYyMyAwLTMuMDEzLjk3MS0zLjY0MSAyLjM2LjUwMi0uMjI3IDEuMDU1LS4zNiAxLjY0MS0uMzYgMi4yMDkgMCA0IDEuNzkxIDQgNCAwIC41ODYtLjEzMyAxLjEzOS0uMzU5IDEuNjQgMS4zODktLjYyNyAyLjM1OS0yLjAxNyAyLjM1OS0zLjY0IDAtMi4yMDktMS43OTEtNC00LTR6JyAvPjxwYXRoIGZpbGw9JyNBMDA0MUUnIGQ9J004IDI4czAtNCAxLTUgMTMuMDAxLTEwLjk5OSAxNC0xMC05LjAwMSAxMy0xMC4wMDEgMTRTOCAyOCA4IDI4eicgLz48L3N2Zz4="></object>
26 |         </div>
27 | 
28 |     </body>
29 | </html>


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .checkered {
 6 |     background-image:   linear-gradient(45deg, #ccc 25%, transparent 25%), 
 7 |                         linear-gradient(-45deg, #ccc 25%, transparent 25%), 
 8 |                         linear-gradient(45deg, transparent 75%, #ccc 75%), 
 9 |                         linear-gradient(-45deg, transparent 75%, #ccc 75%);
10 |     background-size: 20px 20px;
11 |     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
12 | }
13 | 
14 | .text-xxs {
15 |     font-size: 0.5rem;
16 |     line-height: 0.8rem;
17 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./src/**/*.{js,jsx,ts,tsx}",
 4 |   ],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   plugins: [
 9 |     require('@tailwindcss/typography'),
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------