Skip to content

Instantly share code, notes, and snippets.

@deadflowers

deadflowers/README.md

Last active February 2, 2025 01:31
Show Gist options
  • Save deadflowers/d38e726d84cb113f28dd1f03b4ed7ac8 to your computer and use it in GitHub Desktop.
Save deadflowers/d38e726d84cb113f28dd1f03b4ed7ac8 to your computer and use it in GitHub Desktop.
Download ZIP
an svg and datauri container
Raw
README.md

needed an svg for an app i'm working on. couple notables,

  • there's the base64 inline
  • meant to run as a data uri just paste into your address bar for server-less execution and optionally save as a a non js bookmarklet
  • it's actually coded pretty entirely in the address bar, cuz...hahaha i dunno why
  • oh and the favicon inline works,not sure if its a solution for js bookmarklets but maybe
  • feels like i'm forgetting some other notable about it 🤔

ah well, enjoy! the 3 html pages in this gist represent 3 different uri loaded icon demos.

by: ray kooyenga @ github

Raw
svg-datauri-terminal-icon-1-square.html
data:text/html,<!doctype html><html><head><link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgICBmaWxsLW9wYWNpdHk9IjEiIHN0cm9rZS13aWR0aD0iMCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSI1OHB4IiB4PSI2NCIgeT0iNzIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPiZndDtfPC90ZXh0Pgo8L3N2Zz4="><style>@import url('https://d3uaz5bp3928j6.cloudfront.net/assets/web/css/skel.css');html,body{color:black;background-color:gray;}code{max-width:90dvw;}pre{border: 2px inset rgb(225, 225, 225) !important; border-radius: 4px;}pre,code{white-space: pre-wrap!important;word-wrap: break-word!important;}.container-fluid{padding:5px;border: 2px ridge black; background-color:rgb(222, 222, 222); margin: 20px; }.container{justify-content: center;}</style></head><body><div class="container-fluid"><div class="container"><pre><code>data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgICBmaWxsLW9wYWNpdHk9IjEiIHN0cm9rZS13aWR0aD0iMCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSI1OHB4IiB4PSI2NCIgeT0iNzIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPiZndDtfPC90ZXh0Pgo8L3N2Zz4=
</code></pre><marquee><img src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgICBmaWxsLW9wYWNpdHk9IjEiIHN0cm9rZS13aWR0aD0iMCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSI1OHB4IiB4PSI2NCIgeT0iNzIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPiZndDtfPC90ZXh0Pgo8L3N2Zz4='></img></marquee></div></div></body>
Raw
svg-datauri-terminal-icon-2-huge-bw.html
data:text/html,<!doctype html><html><head><link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSI4OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHBhdGggZD0iTTgzMSAxMjdINjNjLTM1LjM1IDAtNjQgMjguNjUtNjQgNjR2NjQwYzAgMzUuMzUgMjguNjUgNjQgNjQgNjRoNzY4YzM1LjM1IDAgNjQtMjguNjUgNjQtNjRWMTkxQzg5NSAxNTUuNjQ5OTk5OTk5OTk5OTggODY2LjM1IDEyNyA4MzEgMTI3ek0xMjcgNTc1bDEyOC0xMjhMMTI3IDMxOWw2NC02NCAxOTIgMTkyTDE5MSA2MzkgMTI3IDU3NXpNNjM5IDYzOUgzODN2LTY0aDI1NlY2Mzl6IiAvPgo8L3N2Zz4="><style>@import url('https://d3uaz5bp3928j6.cloudfront.net/assets/web/css/skel.css');html,body{color:black;background-color:gray;}code{max-width:90dvw;}pre{border: 2px inset rgb(225, 225, 225) !important; border-radius: 4px;}pre,code{white-space: pre-wrap!important;word-wrap: break-word!important;}.container-fluid{padding:5px;border: 2px ridge black; background-color:rgb(222, 222, 222); margin: 20px; }.container{justify-content: center;}</style></head><body><div class="container-fluid"><div class="container"><pre><code>data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSI4OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHBhdGggZD0iTTgzMSAxMjdINjNjLTM1LjM1IDAtNjQgMjguNjUtNjQgNjR2NjQwYzAgMzUuMzUgMjguNjUgNjQgNjQgNjRoNzY4YzM1LjM1IDAgNjQtMjguNjUgNjQtNjRWMTkxQzg5NSAxNTUuNjQ5OTk5OTk5OTk5OTggODY2LjM1IDEyNyA4MzEgMTI3ek0xMjcgNTc1bDEyOC0xMjhMMTI3IDMxOWw2NC02NCAxOTIgMTkyTDE5MSA2MzkgMTI3IDU3NXpNNjM5IDYzOUgzODN2LTY0aDI1NlY2Mzl6IiAvPgo8L3N2Zz4=
</code></pre><marquee><img src='data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSI4OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHBhdGggZD0iTTgzMSAxMjdINjNjLTM1LjM1IDAtNjQgMjguNjUtNjQgNjR2NjQwYzAgMzUuMzUgMjguNjUgNjQgNjQgNjRoNzY4YzM1LjM1IDAgNjQtMjguNjUgNjQtNjRWMTkxQzg5NSAxNTUuNjQ5OTk5OTk5OTk5OTggODY2LjM1IDEyNyA4MzEgMTI3ek0xMjcgNTc1bDEyOC0xMjhMMTI3IDMxOWw2NC02NCAxOTIgMTkyTDE5MSA2MzkgMTI3IDU3NXpNNjM5IDYzOUgzODN2LTY0aDI1NlY2Mzl6IiAvPgo8L3N2Zz4='></img></marquee></div></div></body>
Raw
svg-datauri-terminal-icon-2-wide.html
data:text/html,<!doctype html><html><head><link rel="shortcut icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTY0IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgZmlsbC1vcGFjaXR5PSIxMDAlIiBzdHJva2Utd2lkdGg9IjAiIGZvbnQtZmFtaWx5PSJzYW5zIiBmb250LXNpemU9IjEwMCIgeD0iODAiIHk9Ijg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4mZ3Q7XzwvdGV4dD4KPC9zdmc+Cg=="><style>@import url('https://d3uaz5bp3928j6.cloudfront.net/assets/web/css/skel.css');html,body{color:black;background-color:gray;}code{max-width:90dvw;}pre{border: 2px inset rgb(225, 225, 225) !important; border-radius: 4px;}pre,code{white-space: pre-wrap!important;word-wrap: break-word!important;}.container-fluid{padding:5px;border: 2px ridge black; background-color:rgb(222, 222, 222); margin: 20px; }.container{justify-content: center;}</style></head><body><div class="container-fluid"><div class="container"><pre><code>data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTY0IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgZmlsbC1vcGFjaXR5PSIxMDAlIiBzdHJva2Utd2lkdGg9IjAiIGZvbnQtZmFtaWx5PSJzYW5zIiBmb250LXNpemU9IjEwMCIgeD0iODAiIHk9Ijg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4mZ3Q7XzwvdGV4dD4KPC9zdmc+Cg==
</code></pre><marquee><img src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTY0IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPgogIDwhLS0gbWFkZSBieSByYXkga29veWVuZ2EgaHR0cHM6Ly9yYXlrb295ZW5nYS5jb20gLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siLz4KICA8dGV4dCBmaWxsPSJvcmFuZ2VyZWQiIGxpbmUtaGVpZ2h0PSIyMHB4IiBzdHJva2U9Im9yYW5nZXJlZCIgZmlsbC1vcGFjaXR5PSIxMDAlIiBzdHJva2Utd2lkdGg9IjAiIGZvbnQtZmFtaWx5PSJzYW5zIiBmb250LXNpemU9IjEwMCIgeD0iODAiIHk9Ijg4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4mZ3Q7XzwvdGV4dD4KPC9zdmc+Cg=='></img></marquee></div></div></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment