It would be nice to be able to pass a URL to an SVG and get a base64 encoded version to use in an image src attribute

file_URI|encode_base64_svg

would return something like this

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMwNTIgMTAuMzQ2QzEwLjAzNTEgMTAuMDYxIDkuNTYwNyA5Ljg3ODI4IDkuMDAwNjcgOS44NzgyOEM4LjQ0MDU3IDkuODc4MjggNy45NjYxNiAxMC4wNjEgNy42OTYwNSAxMC4zNDZDNy41NTUxMyAxMC40OTQ3IDcuNDgwNTkgMTAuNjQ3MSA3LjQ1NzEzIDEwLjg2NDNDNy40MTE2NCAxMS4yODQ4IDcuNDM3MTcgMTEuNjQ2OSA3LjQ4NjQ2IDEyLjIyNTlDNy41MzMzOSAxMi43Nzc1IDcuNjIyNTIgMTMuNTEzMiA3LjczODgzIDE0LjI2MjRDNy44MjE1OSAxNC43OTU2IDcuODg4ODMgMTUuMDgzNCA3Ljk1MDA3IDE1LjI4OTVDOC4wNDkzNSAxNS42MjM1IDguNDIwNCAxNS45MTU1IDkuMDAwNjcgMTUuOTE1NUM5LjU4MDg4IDE1LjkxNTUgOS45NTE5MiAxNS42MjM0IDEwLjA1MTIgMTUuMjg5NUMxMC4xMTI0IDE1LjA4MzQgMTAuMTc5NyAxNC43OTU2IDEwLjI2MjQgMTQuMjYyNEMxMC4zNzg4IDEzLjUxMzIgMTAuNDY3OSAxMi43Nzc1IDEwLjUxNDggMTIuMjI1OUMxMC41NjQxIDExLjY0NjkgMTAuNTg5NiAxMS4yODQ4IDEwLjU0NDEgMTAuODY0M0MxMC41MjA3IDEwLjY0NzIgMTAuNDQ2MSAxMC40OTQ3IDEwLjMwNTIgMTAuMzQ2Wk03LjUyODk1IDcuODA4NDdDNy41Mjg5NSA4LjYyMjAyIDguMTg4NDkgOS4yODE1NSA5LjAwMjAzIDkuMjgxNTVDOS44MTU2NSA5LjI4MTU1IDEwLjQ3NTIgOC42MjIwMiAxMC40NzUyIDcuODA4NDdDMTAuNDc1MiA2Ljk5NDg2IDkuODE1NjUgNi4zMzUzMiA5LjAwMjAzIDYuMzM1MzJDOC4xODg0OSA2LjMzNTMyIDcuNTI4OTUgNi45OTQ4NiA3LjUyODk1IDcuODA4NDdaTTguOTgzNzkgMS45OTQ5OEM1LjUzODU0IDIuMDA0NzggMi43MTU0OSA0Ljc5OTc5IDIuNjcyODYgOC4yNDQ4MkMyLjYzODI0IDExLjAzNTUgNC40MTk3IDEzLjQyMjcgNi45MDcyNiAxNC4yOTc3QzYuOTY3NjMgMTQuMzE5IDcuMDI4OTMgMTQuMjY4OCA3LjAxOTQyIDE0LjIwNTVDNi45ODY4IDEzLjk4ODkgNi45NTYwNCAxMy43NzExIDYuOTI3NzkgMTMuNTU3QzYuOTE3NzcgMTMuNDgxMyA2Ljg2OTU2IDEzLjQxNjEgNi43OTk2NyAxMy4zODU1QzQuODMzNTEgMTIuNTI2NiAzLjQ2MDU4IDEwLjU1NDcgMy40ODI2MSA4LjI3MDU4QzMuNTExNTEgNS4yNzMwNiA1Ljk1OTIzIDIuODI5MzQgOC45NTY3NSAyLjgwNTA5QzEyLjAyMTIgMi43ODAzNCAxNC41MjIgNS4yNjU5NyAxNC41MjIgOC4zMjQ3M0MxNC41MjIgMTAuNTg2IDEzLjE1NTEgMTIuNTMzNyAxMS4yMDQyIDEzLjM4NThDMTEuMTM0NCAxMy40MTYzIDExLjA4NjQgMTMuNDgxOCAxMS4wNzY1IDEzLjU1NzRDMTEuMDQ4MiAxMy43NzE0IDExLjAxNzUgMTMuOTg5MSAxMC45ODQ5IDE0LjIwNTVDMTAuOTc1MyAxNC4yNjg4IDExLjAzNjYgMTQuMzE5IDExLjA5NyAxNC4yOTc4QzEzLjU2MDggMTMuNDMxMiAxNS4zMzE5IDExLjA4MTEgMTUuMzMxOSA4LjMyNDhDMTUuMzMxOCA0LjgyODM0IDEyLjQ4MjQgMS45ODQ5NyA4Ljk4Mzc5IDEuOTk0OThaTTguODY5NDEgNC44OTg4N0MxMC44MjI1IDQuODIzMjYgMTIuNDM1NCA2LjM5MDEyIDEyLjQzNTQgOC4zMjY2NkMxMi40MzU0IDkuMzExNTIgMTIuMDE4MSAxMC4yMDA3IDExLjM1MTIgMTAuODI2OUMxMS4yOTQ3IDEwLjg4IDExLjI2NDMgMTAuOTU1NCAxMS4yNjg2IDExLjAzMjhDMTEuMjgxOSAxMS4yNjg0IDExLjI3NzEgMTEuNDk3MyAxMS4yNjE0IDExLjc1NThDMTEuMjU3MiAxMS44MjQ3IDExLjMzNDQgMTEuODY4NyAxMS4zOTE0IDExLjgyOThDMTIuNTA5OCAxMS4wNjU2IDEzLjI0NTQgOS43ODA1IDEzLjI0NTQgOC4zMjY2NkMxMy4yNDU0IDUuOTMyODggMTEuMjUxNSAzLjk5NTk4IDguODM3MjkgNC4wODk1NEM2LjU5MzczIDQuMTc2NTMgNC43OTM3NCA2LjAyNjMgNC43NjQ5OSA4LjI3MTQzQzQuNzQ2MSA5Ljc0ODAyIDUuNDg2MTggMTEuMDU2MSA2LjYxODkxIDExLjgzQzYuNjc1NzggMTEuODY4OCA2Ljc1MjgyIDExLjgyNDggNi43NDg2IDExLjc1NkM2LjczMjg2IDExLjQ5NzMgNi43MjgwNyAxMS4yNjg0IDYuNzQxMyAxMS4wMzI4QzYuNzQ1NjYgMTAuOTU1NCA2LjcxNTMzIDEwLjg4IDYuNjU4ODkgMTAuODI3QzUuOTcxMTggMTAuMTgxNCA1LjU0ODg0IDkuMjU2MDkgNS41NzU3NCA4LjIzNDU5QzUuNjIzMSA2LjQzNjk3IDcuMDcyNDMgNC45Njg0NyA4Ljg2OTQxIDQuODk4ODdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K

Some code out there as a starting point https://gist.github.com/bradyvercher/7952090

CommentFileSizeAuthor
#3 twig_tweak-3373333-encode-svg-base64-2.patch2.29 KBpaulsheldrake
#2 twig_tweak-3373333-encode-svg-base64.patch1.56 KBpaulsheldrake

Comments

paulsheldrake created an issue. See original summary.

paulsheldrake’s picture

paulsheldrake commented
StatusFileSize
new twig_tweak-3373333-encode-svg-base64.patch1.56 KB

Initial patch

paulsheldrake’s picture

paulsheldrake commented
StatusFileSize
new twig_tweak-3373333-encode-svg-base64-2.patch2.29 KB

Add some caching

paulsheldrake’s picture

paulsheldrake commented

Usage example

<img src="{{ drupal_svg_encode('/themes/custom/theme_name/assets/icons/icon-rss.svg') }}" {{ attributes|without('src') }}>

vlad.dancer’s picture

vlad.dancer
Primary language Ukrainian
Location Kyiv
commented

@paulsheldrake looks interesting. Any reason to limit it to svg only?
I would use it to show inline small image for pre-loading purpouses.

paulsheldrake’s picture

paulsheldrake commented

Yeah, totally possible to example to other image types.

The reason I didn't here is:

  • The project I'm on currently just needs it for SVGs :)
  • Other file types can be quite large which then can cause memory issues, especially if there a lot of images to process.

That being said something to investigate more later if i get time

chi’s picture

chi commented

There is a data URI filter in Twig but it lives in a separate Twig extension. Twig Tweak could just register that extension in Drupal.

chi’s picture

chi commented

Given that the filter is just a few lines of code we could just copy it into Twig Tweak.

  • Chi committed ed7ae10b on 3.x 
    Issue #3373333 by paulsheldrake, Chi: New filter to base64 encode and...
chi’s picture

chi commented
Status: Active » Fixed

I've added data_uri filter. It will be available in the next release. Thank you.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

tormi’s picture

tormi
Primary language Estonian
Location Tallinn
commented

@paulsheldrake looks interesting. Any reason to limit it to svg only?
I would use it to show inline small image for pre-loading purpouses.

Please don't! We had an incident of backups of the production database failing due to large `data:image` chunks in the database.