How to use svg in CSS in trial mode in Squarespace (with base64 encoding)

Some time ago Squarespace disallow linking to svg files (and actually any uploaded file, like pdf, etc.) in trial mode. While technically you can upload the file itself, it will not work until you have a dedicated domain on your site and paid plan.

It’s an issue, because on many occasions you might want to use e.g. svg files for icons in your CSS while being in trial mode (developing site for the client, etc). In that case there is a trick you can use to still use svg in CSS, called base64 file encoding. It will transform a file to the code which you can then use in CSS code.

There are some downsides to this:

• It will not work for large files
• Not super convenient in terms of code maintainability as it creates a long string of text

That said, it’s probably not a good idea to use it for real images, but it works pretty well for small svg files.

There are several services to use, but for this tutorial we will use https://www.fffuel.co/eeencode/

Convert a file

So just upload svg file and copy url string when it’s processed (yeah, it might get pretty long):

url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMTIgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwLjAwMDAwMCwgLTQ0LjAwMDAwMCkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0MC4wMDAwMDAsIDQ0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMCBMMywwIEMxLjM0MzE0NTc1LDAgMCwxLjM0MzE0NTc1IDAsMyBMMCwxNyBDMCwxOC42NTY4NTQyIDEuMzQzMTQ1NzUsMjAgMywyMCBMOSwyMCBDMTAuNjU2ODU0MiwyMCAxMiwxOC42NTY4NTQyIDEyLDE3IEwxMiwzIEMxMiwxLjM0MzE0NTc1IDEwLjY1Njg1NDIsMCA5LDAgWiBNMiwzIEMyLDIuNDQ3NzE1MjUgMi40NDc3MTUyNSwyIDMsMiBMOSwyIEM5LjU1MjI4NDc1LDIgMTAsMi40NDc3MTUyNSAxMCwzIEwxMCwxNyBDMTAsMTcuNTUyMjg0NyA5LjU1MjI4NDc1LDE4IDksMTggTDMsMTggQzIuNDQ3NzE1MjUsMTggMiwxNy41NTIyODQ3IDIsMTcgTDIsMyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxnIGlkPSJyZXNldF93cmVuY2hfMjNkcF81RjYzNjhfRklMTDBfd2dodDQwMF9HUkFEMF9vcHN6MjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMDAwMDAwLCA1LjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuODgzMzMzMzMsNi41MzMzMzMzMyBMMy40MTY2NjY2Nyw4IEwyLDYuNTgzMzMzMzMgTDMuNDY2NjY2NjcsNS4xMTY2NjY2NyBDMy40MjIyMjIyMiw0Ljk5NDQ0NDQ0IDMuMzg4ODg4ODksNC44NjY2NjY2NyAzLjM2NjY2NjY3LDQuNzMzMzMzMzMgQzMuMzQ0NDQ0NDQsNC42IDMuMzMzMzMzMzMsNC40NjY2NjY2NyAzLjMzMzMzMzMzLDQuMzMzMzMzMzMgQzMuMzMzMzMzMzMsMy42ODg4ODg4OSAzLjU2MTExMTExLDMuMTM4ODg4ODkgNC4wMTY2NjY2NywyLjY4MzMzMzMzIEM0LjQ3MjIyMjIyLDIuMjI3Nzc3NzggNS4wMjIyMjIyMiwyIDUuNjY2NjY2NjcsMiBDNS44NjY2NjY2NywyIDYuMDYxMTExMTEsMi4wMjUgNi4yNSwyLjA3NSBDNi40Mzg4ODg4OSwyLjEyNSA2LjYxNjY2NjY3LDIuMTk0NDQ0NDQgNi43ODMzMzMzMywyLjI4MzMzMzMzIEw1LjIsMy44NjY2NjY2NyBMNi4xMzMzMzMzMyw0LjggTDcuNzE2NjY2NjcsMy4yMzMzMzMzMyBDNy44MDU1NTU1NiwzLjQgNy44NzUsMy41NzUgNy45MjUsMy43NTgzMzMzMyBDNy45NzUsMy45NDE2NjY2NyA4LDQuMTMzMzMzMzMgOCw0LjMzMzMzMzMzIEM4LDQuOTc3Nzc3NzggNy43NzIyMjIyMiw1LjUyNzc3Nzc4IDcuMzE2NjY2NjcsNS45ODMzMzMzMyBDNi44NjExMTExMSw2LjQzODg4ODg5IDYuMzExMTExMTEsNi42NjY2NjY2NyA1LjY2NjY2NjY3LDYuNjY2NjY2NjcgQzUuNTIyMjIyMjIsNi42NjY2NjY2NyA1LjM4NjExMTExLDYuNjU1NTU1NTYgNS4yNTgzMzMzMyw2LjYzMzMzMzMzIEM1LjEzMDU1NTU2LDYuNjExMTExMTEgNS4wMDU1NTU1Niw2LjU3Nzc3Nzc4IDQuODgzMzMzMzMsNi41MzMzMzMzMyBaIiBpZD0iU2hhcGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA1LjAwMDAwMCkgcm90YXRlKC00NS4wMDAwMDApIHRyYW5zbGF0ZSgtNS4wMDAwMDAsIC01LjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")

Use in CSS

From there you can use in CSS background as a regular file:

background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMTIgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQwLjAwMDAwMCwgLTQ0LjAwMDAwMCkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0MC4wMDAwMDAsIDQ0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMCBMMywwIEMxLjM0MzE0NTc1LDAgMCwxLjM0MzE0NTc1IDAsMyBMMCwxNyBDMCwxOC42NTY4NTQyIDEuMzQzMTQ1NzUsMjAgMywyMCBMOSwyMCBDMTAuNjU2ODU0MiwyMCAxMiwxOC42NTY4NTQyIDEyLDE3IEwxMiwzIEMxMiwxLjM0MzE0NTc1IDEwLjY1Njg1NDIsMCA5LDAgWiBNMiwzIEMyLDIuNDQ3NzE1MjUgMi40NDc3MTUyNSwyIDMsMiBMOSwyIEM5LjU1MjI4NDc1LDIgMTAsMi40NDc3MTUyNSAxMCwzIEwxMCwxNyBDMTAsMTcuNTUyMjg0NyA5LjU1MjI4NDc1LDE4IDksMTggTDMsMTggQzIuNDQ3NzE1MjUsMTggMiwxNy41NTIyODQ3IDIsMTcgTDIsMyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxnIGlkPSJyZXNldF93cmVuY2hfMjNkcF81RjYzNjhfRklMTDBfd2dodDQwMF9HUkFEMF9vcHN6MjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMDAwMDAwLCA1LjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuODgzMzMzMzMsNi41MzMzMzMzMyBMMy40MTY2NjY2Nyw4IEwyLDYuNTgzMzMzMzMgTDMuNDY2NjY2NjcsNS4xMTY2NjY2NyBDMy40MjIyMjIyMiw0Ljk5NDQ0NDQ0IDMuMzg4ODg4ODksNC44NjY2NjY2NyAzLjM2NjY2NjY3LDQuNzMzMzMzMzMgQzMuMzQ0NDQ0NDQsNC42IDMuMzMzMzMzMzMsNC40NjY2NjY2NyAzLjMzMzMzMzMzLDQuMzMzMzMzMzMgQzMuMzMzMzMzMzMsMy42ODg4ODg4OSAzLjU2MTExMTExLDMuMTM4ODg4ODkgNC4wMTY2NjY2NywyLjY4MzMzMzMzIEM0LjQ3MjIyMjIyLDIuMjI3Nzc3NzggNS4wMjIyMjIyMiwyIDUuNjY2NjY2NjcsMiBDNS44NjY2NjY2NywyIDYuMDYxMTExMTEsMi4wMjUgNi4yNSwyLjA3NSBDNi40Mzg4ODg4OSwyLjEyNSA2LjYxNjY2NjY3LDIuMTk0NDQ0NDQgNi43ODMzMzMzMywyLjI4MzMzMzMzIEw1LjIsMy44NjY2NjY2NyBMNi4xMzMzMzMzMyw0LjggTDcuNzE2NjY2NjcsMy4yMzMzMzMzMyBDNy44MDU1NTU1NiwzLjQgNy44NzUsMy41NzUgNy45MjUsMy43NTgzMzMzMyBDNy45NzUsMy45NDE2NjY2NyA4LDQuMTMzMzMzMzMgOCw0LjMzMzMzMzMzIEM4LDQuOTc3Nzc3NzggNy43NzIyMjIyMiw1LjUyNzc3Nzc4IDcuMzE2NjY2NjcsNS45ODMzMzMzMyBDNi44NjExMTExMSw2LjQzODg4ODg5IDYuMzExMTExMTEsNi42NjY2NjY2NyA1LjY2NjY2NjY3LDYuNjY2NjY2NjcgQzUuNTIyMjIyMjIsNi42NjY2NjY2NyA1LjM4NjExMTExLDYuNjU1NTU1NTYgNS4yNTgzMzMzMyw2LjYzMzMzMzMzIEM1LjEzMDU1NTU2LDYuNjExMTExMTEgNS4wMDU1NTU1Niw2LjU3Nzc3Nzc4IDQuODgzMzMzMzMsNi41MzMzMzMzMyBaIiBpZD0iU2hhcGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA1LjAwMDAwMCkgcm90YXRlKC00NS4wMDAwMDApIHRyYW5zbGF0ZSgtNS4wMDAwMDAsIC01LjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")