Added functionality inline-svg-code
#2069
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 aurl('data:image/svg+xml,...')
string.Example:
Will output:
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 usingRMagick
and theinline_image
methodinline_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 requiringRMagick
is too heavy duty for general compass use.