Skip to content

Instantly share code, notes, and snippets.

@tevashov

tevashov/inline-img-src-data.html

Last active December 11, 2022 07:12
Show Gist options
  • Save tevashov/0bbda1de06e64db542d706d9ad098bcc to your computer and use it in GitHub Desktop.
Save tevashov/0bbda1de06e64db542d706d9ad098bcc to your computer and use it in GitHub Desktop.
Download ZIP
Inline SVG in HTML/CSS #HTML #CSS
Raw
inline-img-src-data.html
<!--
UTF8 <img class="logo" alt="logo" src="data:image/svg+xml;uft8,[data]">
BASE64 <img class="logo" alt="logo" src="data:image/svg+xml;base64,[data]">
use https://yoksel.github.io/url-encoder/ to encode SVG content
-->
<img class="logo" alt="logo" src="data:image/svg+xml;uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='18'%3E%3Cg fill='%23242D52' fill-rule='evenodd'%3E%3Cpath d='M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z'/%3E%3C/g%3E%3C/svg%3E">
Raw
inline-url-data.css
/*
'PLAIN' url("data:image/svg+xml,[data]")
UTF8 url("data:image/svg+xml;utf8,[data]");
BASE64 url("data:image/svg+xml;base64,[data]");
use https://yoksel.github.io/url-encoder/ to encode SVG content
*/
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='18'%3E%3Cg fill='%23242D52' fill-rule='evenodd'%3E%3Cpath d='M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z'/%3E%3C/g%3E%3C/svg%3E")
top 10px
right 10px
no-repeat;
Raw
svg-instead-img.html
<!-- direct replacement -->
<style>
.hamburger-icon { width: 80px; height: auto; }
/* SVG props accessible via something like this: */
.hamburger-icon g { fill: #ffff }
</style>
<svg class="hamburger-icon" xmlns="http://www.w3.org/2000/svg" width="25" height="18"><g fill="#242D52" fill-rule="evenodd"><path d="M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z"/></g></svg>
<!-- in some cases 'viewbox' attribute required with the zeroes and the same values as svg width/height properties -->
<svg class="hamburger-icon" xmlns="http://www.w3.org/2000/svg" width="25" height="18" viewbox="0 0 25 18"><g fill="#242D52" fill-rule="evenodd"><path d="M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z"/></g></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment