SVG in CSS broken

  • Resolved Grzegorz.Janoszka

    (@grzegorzjanoszka)


    7 years, 1 month ago

    Hi, I love this plugin, but today it caused me some pain.
    I am including small SVG’s in the CSS, but I don’t use base64, I encode only some characters, like advised here: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

    Without autoptimize everything looks great, but autoptimize breaks gradients. Here is the code. Original encoded svg:

    fill=’url(%23b)’

    but autoptimize breaks it to:

    fill=’url(//MY.HOST/wp-content/plugins/MYPLUGIN/%23b)’

    and of course it doesn’t work – svg is corrupted. Just for completion, such fill is defined earlier as:

    %3ClinearGradient id=’b’ …

    As far as I understand the encoding proposed on the website mentioned by me is 100% legal (I mean – according to all standards) and the problem seems to be only with autoptimize.

    Could you please take a look into it?

    Once again – thank you for fantastic plugin and awesome support.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Frank Goossens

    (@futtta)

    7 years, 1 month ago

    I tried with the latest dev-version of AO with this CSS;

    header {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224%20387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E");
}

    and this seems not to break any more. So, if my example is a correct example of what you’re trying to do, can you try with the latest AO version?

    Thread Starter Grzegorz.Janoszka

    (@grzegorzjanoszka)

    7 years, 1 month ago

    Frank, in the above example there is no element (gradient id) to break – you need to have fill=’url(#ID)’ which after encoding is fill=’url(%23ID)’. This is the only svg element which I noticed broken.

    Try such code:
    div.test{background-image:url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’90px’ height=’110px’ viewBox=’0 0 90 110’%3E%3Cstyle%3E.a%7Bstop-color:%23FFF;%7D.b%7Bstop-color:%23B2D235;%7D.c%7Bstop-color:%23BEE7FA;%7D.d%7Bfill:%23590C15;%7D%3C/style%3E%3ClinearGradient id=’c’ y2=’135.4′ gradientUnits=’userSpaceOnUse’ x2=’209.1′ gradientTransform=’rotate(-1.467 -4082.888 7786.794)’ y1=’205.8′ x1=’262’%3E%3Cstop class=’b’ offset=’0’/%3E%3Cstop class=’b’ offset=’.48’/%3E%3Cstop stop-color=’%23829D25′ offset=’1’/%3E%3C/linearGradient%3E%3Cpath stroke-width=’.3′ d=’M77.3 45.4c-3-3.5-7.1-6.5-11.6-7.8-5.1-1.5-10-.1-14.9 1.5C52 35.4 54.3 29 60 24l-4.8-5.5c-3.4 3-5.8 6.3-7.5 9.4-1.7-4.3-4.1-8.4-7.5-12C33.4 8.6 24.3 4.7 15.1 4.2c-.2 9.3 3.1 18.6 9.9 25.9 5.2 5.6 11.8 9.2 18.7 10.8-2.5.2-4.9-.1-7.7-.9-5.2-1.4-10.5-2.8-15.8-1C10.6 42.3 4.5 51.9 4 61.7c-.5 11.6 3.8 23.8 9.9 33.5 3.9 6.3 9.6 13.7 17.7 13.4 3.8-.1 7-2.1 10.7-2.7 5.2-.8 9.1 1.2 14.1 1.8 16.4 2 24.4-23.6 26.4-35.9 1.2-9.1.8-19.1-5.5-26.4z’ stroke=’%233E6D1F’ fill=’url(%23c)’/%3E%3C/svg%3E”)}

    It is a simple apple shape. Normally it has a nice gradient fill, but autoptimize makes it ugly with just a border line, no fill.

    I have tried the latest AO version (from the zip) and it still breaks the gradients.

    Plugin Author Frank Goossens

    (@futtta)

    7 years, 1 month ago

    ok, on it, cfr. https://github.com/futtta/autoptimize/pull/81#issuecomment-281116099

    pretty nifty, encoded inline SVG … 😉

    Thread Starter Grzegorz.Janoszka

    (@grzegorzjanoszka)

    7 years, 1 month ago

    Well, the SVG’s are pretty small, about 2.5 kB each, so it would be a shame to have them as a separate files. I know I could merge all SVG’s together into one svg file but well, inlining is just easier. Both CSS and SVG files would be cached, so they can be cached together as one file, can’t they?

    Thank you so much for amazing and blazing fast support (as always) and I am looking forward to seeing my WP sites asking me to upgrade autoptimize 🙂

    Plugin Author Frank Goossens

    (@futtta)

    7 years, 1 month ago

    well, no need to have them as separate files, but instead of url-encoding you could base64-encode and all would be fine as well 🙂

    a fix should be in the Github-version soon (it works on my local install, but want to wait for the blessing of some others as we had just reworked relevant code), it might be some time before all of that makes it into an official AO update on wordpress.org though ..

    Thread Starter Grzegorz.Janoszka

    (@grzegorzjanoszka)

    7 years, 1 month ago

    Base64 is big! There would be more packets on Internet, more heat and more CO2 in the atmosphere 🙂

    Plugin Author Frank Goossens

    (@futtta)

    7 years, 1 month ago

    well, we wouldn’t want to kill dolphins, so I committed a fix in the Github version. updating AO to the latest github-version should allow you to see those green apples in all their glory 🙂

    Thread Starter Grzegorz.Janoszka

    (@grzegorzjanoszka)

    7 years, 1 month ago

    It seems it works, thank you! 🙂

    Plugin Author Frank Goossens

    (@futtta)

    7 years, 1 month ago

    but does it work crazy good? 😉

    but seriously, thanks for reporting, it’s cutting edge stuff like this that helps keeping AO relevant!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘SVG in CSS broken’ is closed to new replies.