Skip to content

Instantly share code, notes, and snippets.

@plugn

plugn/Encode SVG SCSS.markdown

Created December 7, 2015 16:16
Show Gist options
  • Save plugn/c08bf722c1b9a728d9c7 to your computer and use it in GitHub Desktop.
Save plugn/c08bf722c1b9a728d9c7 to your computer and use it in GitHub Desktop.
Download ZIP
Encode SVG SCSS
Raw
Encode SVG SCSS.markdown
Raw
index.html
<article>
<header>
<h1>Encode SVG SCSS</h1>
<section>
<figure class="cartman">
<!-- Do you see Cartman? -->
<figcaption></figcaption>
</figure>
</section>
<p>A small function in response to <a href="http://codepen.io/Tigt/" target="_blank">Taylor Hunt's</a> blog post <a href=" http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris" target="_blank">"Optimizing svgs in data uris"</a> allowing you to skip base64 encoding and simply paste the SVG markup right in the CSS.</p>
<p><em>If you don't see Cartman please let me know what browser and OS you are on (IE8 don't bother ;-)</em></p>
</header>
<section>
<label for="pastezone">Online version if you are in a hurry – just copy paste copy:<br><br></label>
<textarea id="pastzone" placeholder="Paste SVG Code here! "></textarea>
</section>
<section>
<h2>Use example</h2>
<div data-ace-mode="scss">.class {
background-image: svg-url('&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;.....&lt;/svg&gt;');
}</div>
</section>
<section>
<h2>The Function</h2>
<div data-ace-mode="scss">//
// Function to create an optimized svg url
//
@function svg-url($svg){
//
// Chunk up string in order to avoid
// "stack level too deep" error
//
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
//
// Encode (may need a few extra replacements)
//
$chunk: str-replace($chunk,'"','\'');
$chunk: str-replace($chunk,'&lt;','%3C');
$chunk: str-replace($chunk,'&gt;','%3E');
$chunk: str-replace($chunk,'&','%26');
$chunk: str-replace($chunk,'#','%23');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}
// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index +
str-length($search)), $search, $replace);
}
@return $string;
}
</div>
</section>
<footer data-related-pens="doMoML"></footer>
</article>
Raw
script.js
//
// Editor: //cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js
var theme='ace/theme/tomorrow';
var mode='ace/mode/scss';
var editors = document.querySelectorAll('[data-ace-mode]');
console.log( editors.length );
for(var i=0,l=editors.length;i<l;++i){
var editor= ace.edit(editors[i]);
if(editors[i].getAttribute('data-ace-theme')){
editor.setTheme('ace/theme/'+editors[i].getAttribute('data-ace-theme'));
} else {
editor.setTheme(theme);
}
if(editors[i].getAttribute('data-ace-mode')){
editor.getSession().setMode('ace/mode/'+editors[i].getAttribute('data-ace-mode'));
} else {
editor.getSession().setMode(mode);
}
editor.renderer.setShowGutter(false);
editor.setShowPrintMargin(false);
editor.setShowPrintMargin(false);
editor.setDisplayIndentGuides(false);
editor.setOptions({
maxLines: Infinity,
//readOnly: false,
highlightActiveLine: false,
highlightGutterLine: false
});
}
function getTextAreaSelection(textarea) {
var start = textarea.selectionStart, end = textarea.selectionEnd;
return {
start: start,
end: end,
length: end - start,
text: textarea.value.slice(start, end)
};
}
function detectPaste(textarea, callback) {
textarea.onpaste = function() {
var sel = getTextAreaSelection(textarea);
var initialLength = textarea.value.length;
window.setTimeout(function() {
var val = textarea.value;
var pastedTextLength = val.length - (initialLength - sel.length);
var end = sel.start + pastedTextLength;
callback({
start: sel.start,
end: end,
length: pastedTextLength,
text: val.slice(sel.start, end)
});
}, 1);
};
}
var textarea = document.getElementById("pastzone");
detectPaste(textarea, function(svg) {
// alert(pasteInfo.text);
txt = svg.text
.replace(/"/g,'\'')
.replace(/</g,'%3C')
.replace(/>/g,'%3E')
.replace(/&/g,'%26')
.replace(/#/g,'%23')
.replace(/\s+/g,' ')
textarea.value = 'background-image: url("data:image/svg+xml;charset=utf8,'+txt+'");';
textarea.select();
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68258285-1', 'auto');
ga('send', 'pageview');
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script src="//codepen.io/jakob-e/pen/MwKXbV.js"></script>
Raw
style.css
html { box-sizing: box-model; }
*, *:before, *:after { box-sizing: inherit; }
header,main,nav,article,section,figure,figcaption,code{ display:block;position: relative; }
@mixin aspect-ratio($arglist... /*$width/$ratio, $height*/){
$map : keywords($arglist);
$height: map-get($map, height) or nth-or-null($arglist, 2);
$width: map-get($map, width) or nth-or-null($arglist, 1);
$ratio: map-get($map, ratio) or if($width and $height, $width/$height, nth-or-null($arglist, 1)) or 1;
$padding: 1/$ratio * 100%;
&:before { content: ''; float:left; padding-bottom: $padding; }
&:after { content: ''; display:table; clear: both; }
}
// Helper function
// Return null rather than throwing an error if index is outside list range.
@function nth-or-null($list, $index) {
@return if(length($list) >= $index, nth($list, $index), null);
}
//
// Function to replace characters in a string
//
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index +
str-length($search)), $search, $replace);
}
@return $string;
}
//
// Function to create an optimized svg url
// (may need a few extra replacements)
//
@function old_svg-url($svg){
$svg: str-replace($svg,'"','\'');
$svg: str-replace($svg,'<','%3C');
$svg: str-replace($svg,'>','%3E');
$svg: str-replace($svg,'&','%26');
$svg: str-replace($svg,'#','%23');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
@function svg-url($svg){
//
// Chunk up string in order to avoid
// "SystemStackError: stack level too deep"
//
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
$chunk: str-replace($chunk,'"','\'');
$chunk: str-replace($chunk,'<','%3C');
$chunk: str-replace($chunk,'>','%3E');
$chunk: str-replace($chunk,'&','%26');
$chunk: str-replace($chunk,'#','%23');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}
.cartman {
@include aspect-ratio();
width: 40%;
margin: 40px 0;
padding: 0;
position: relative;
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="#804D35" d="M35 254.6l9.7 28.8 211 1.7 12-34L35 255"/><path fill="#2F2B33" d="M40 288c1.3 1.2 221 0 221 0s5.3-6.4-50.2-10c-34.4.8-55.7 6-55.7 6s-25-6-47-6c-91 4-69 8.8-68 10z"/><path fill="#EE304E" d="M15.2 187.8s20.3-30 36.2-35.4c3.6 1.2 189 1.5 198.3 1.2 26.8 5.8 23.5 24 31.6 26.4 1.8-.3 11 79.6-19.8 77.6-1.3 2.5-50.6 4-55.7 4.5s-21.4 10-43 13c-4.6 1-78.7 0-78.7 0s-34-4-55-26c-1-2 0-9-13-60z"/><ellipse cx="151.3" cy="128.9" fill="#FFEDC3" rx="109.8" ry="76.8"/><path fill="#00B8C3" d="M43 114.6c0-49 58-81 107-82 82.7-2 106.5 68.2 105.3 67.6C133.3 44.7 43 114.6 43 114.6z"/><path fill="#FCEE21" d="M44.3 117.7c43.7-26 94-35.7 144.5-30.4 16 1.7 32 5 47.6 9.8 4.5 2 9 3 13.4 5l3.5 2c-1 0 .3 0 .6 1 4 2 8-4.2 3-6.2-22-10-46-14.6-69-17-51-6.5-103 4.5-148 31-4 2.3-1 9 4 6.3zm72.4-84.4s9-4.8 10.4-3.8 2-2.3 2-2.3l9-2h11l1-2.3s12-1 13 2c0 4 15.7 4 15 10-2.5 8-12 2-13 4-11.4 6-17 0-17 0l-13 4-1-7s-3 5-8 5.3c-17.3 4-9-8.5-9-8.5zm-100.5 155C6 189.3-7 221 24 227.3c10.4-2.6 40 2 36-13s-33.8-24.2-44-26zm267.4-7s5-1 8 4 4.7 22.2 4 27.6-.6 10-13.8 11-18.8-9-19.8-8-14.2 1-14.2 1-7.4-7 1.3-12c4-3 4-8 4-8s5-12 9-14 22-2 22-2z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M68 167.3c11 12 91 71 170.3-5.6m-73 45.6c2 36.4-1.3 65.6-1.3 65.6"/><ellipse cx="157.1" cy="213.4" rx="1" ry="3"/><ellipse cx="159.7" cy="238.7" rx="1.2" ry="3.3"/><ellipse cx="157.2" cy="262.7" rx="2" ry="3.4"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M139 188.5c15.7 5.5 38 0 38 0"/><ellipse cx="182.5" cy="119.1" fill="#FFF" transform="matrix(.81 -.587 .587 .81 -35.153 129.678)" rx="26.7" ry="30.5"/><ellipse cx="126.5" cy="119.1" fill="#FFF" transform="matrix(.884 .467 -.467 .884 70.21 -45.287)" rx="26.7" ry="30.5"/><circle cx="138.6" cy="117.9" r="3.3"/><circle cx="170.6" cy="117.9" r="3.3"/><path d="M134.7 172.4c3.4-3.5 7.7-3.2 7.7-3.2s24.2-.2 25.5.3 2 3 2 4.2c-1 1.4-5 10.7-7 13.3-2 1.8-9 0-9 0s-4-1-5-1.8c-.7-.3-3.4 0-4-.2s-11.5-10.6-12-12.3"/><path fill="#FFF" d="M149 172.3c-.2-1-1-1.7-1.8-1.5l-3 .5c-.8 0-1.3 1-1.2 2 .2 1 1 1.7 1.8 1.5l3-.5c1 0 1.4-1 1.2-2zm9 1.5c.2-.8-.3-1.6-1-1.8l-4.2-.8c-.7 0-1.5.4-1.6 1.2v.3c-.3.8.2 1.6 1 1.8l4 .8c.8 0 1.6-.4 1.7-1.2zm9-.4c0-1-.8-1.7-1.6-1.6l-5 .4c-.8 0-1.4 1-1.3 1.8 1 1 1 1.7 2 1.6l5-.4c1 0 2-1 2-1.8z"/></svg>');
background-size: cover;
background-repeat:no-repeat;
background-position:50% 50%;
}
figcaption {
position:absolute;
display:block;
left: 100%;
&:before,&:after {
content:'';
position:absolute;
display:block;
}
&:before {
font:15px 'Comic Sans MS';
content:'SVG in CSS freaking sucks ...Wait What!';
text-transform:uppercase;
width:230px;
text-align:center;
border:1px solid #f1f1f1;
background:#f1f1f1;
border-radius:5px;
padding:20px;
}
&:after{
top:75px;
left: 10px;
transform:rotate(30deg);
border-top:30px solid #f1f1f1;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
}
$logo-color : #00b8c4;
$body-color : whitesmoke;
$h1-color : #00b8c4;
$h2-color : #00b8c4;
$h3-color : #00b8c4;
$text-color : #282828;
$link-color : #00b8c4;
html { box-sizing: box-model; }
*, *:before, *:after { box-sizing: inherit; }
header,main,nav,article,section,figure,figcaption,code{ display:block;position: relative; }
@include google-font{
@include google-font(Lato, 300 400 700);
@include google-font(Lato, 300 400 700, italic);
@include google-font('Playfair Display', $text: '“”‘’"\'');
@include google-font('Lateef');
}
p,label { font: 400 16px/1.3 'Lato', sans-serif; color: $text-color; }
h1 { font: 300 36px/1.3 'Lato', sans-serif; color: $h1-color; }
h2 { font: 300 24px/1.3 'Lato', sans-serif; color: $h2-color; }
[class*="example"] {font: 400 14px/1.3 'Lato', sans-serif; color: white; }
a {color: $link-color; text-decoration: none; &:hover {
text-decoration: underline;
}}
strong { font: inherit; font-weight: 700; }
em { font: inherit; font-style: italic; }
p { max-width: 700px; }
blockquote {
padding:0; margin:20px 0;
&:before { content: '“'; font-family: 'Playfair Display'; font-size:16px; }
&:after { content: '”'; font-family: 'Playfair Display'; font-size:16px; }
}
[data-related-pens] { background: $logo-color; }
body {
background: $body-color;
}
article {
margin:-20px auto 40px;
max-width: 900px;
border-radius: 7px;
padding: 20px 40px 0;
background: white;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
section { margin: 40px 0; }
textarea {
width:100%;
height:200px;
background:whitesmoke;
border:1px solid #dddd;
}
Raw
styles
<link href="//codepen.io/jakob-e/pen/BNNMjd" rel="stylesheet" />
<link href="//codepen.io/jakob-e/pen/966b8c9839f91b7f4919d0872fb633cc" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment