Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added functionality inline-svg-code #2069

Open
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

lvl99
Copy link

@lvl99 lvl99 commented Mar 17, 2016

I wanted a method to generate an inline SVG image that references SCSS variables within the CSS. I saw that inline-image existed, however that method only inlines an existing image located on the filesystem.

I wrote the inline-svg-code based on the insights found at CSS Tricks' "Probably Don’t Base64 SVG".

inline-svg-code takes a string containing <svg> code and encodes it into a url('data:image/svg+xml,...') string.

Example:

$color: #eeeeee;
.example {
  background-image: inline-svg-code('<svg width="100" height="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10"><g fill="none" stroke="#{$color}" stroke-width="3"><path stroke-linecap="butt" d="M0,5 L100,5" /></g></svg>');
}

Will output:

.example {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22100%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2010%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23eeeeee%22%20stroke-width%3D%223%22%3E%3Cpath%20stroke-linecap%3D%22butt%22%20d%3D%22M0%2C5%20L100%2C5%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

Additionally I wrote another method called inline-svg-code-to-png which takes a string containing <svg> code and converts it to a PNG file using RMagick and the inline_image method inline_image_string to place it within the CSS file as an inline PNG image encoded at base64. I've commented out this code in case requiring RMagick is too heavy duty for general compass use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants