SVG being modified by CDN

Hello,

I’m having trouble with an SVG being delivered from the CDN. The file being served is different from the file outputted from the build. The breaking difference between my file and the served file is that a tag which is being used to centre the content is removed in the served file, so the SVG does not appear as I intended.

I’ve tried deployment with asset optimization and without, and I’ve tried adding extra attributes and children to the tag incase the it the optimizer or whatever was viewing the tag as unnecessary.

This is my site. To trigger the delivery of the SVG you may have to simulate a slower connection.

Thanks in advance for the help.

Hi @rynoV,

Can you show the code that’s being changed exactly? And do you mean a tag in the SVG or a tag in your HTML? Thanks.

Hi Gerald,

Attached are the original (heart.svg) and the changed (modified-heart.svg) files, and I was referring to a tag in the svg. The important code is the tag in heart.svg which was removed in modified-heart.svg.

Thanks a lot

(Attachment heart.svg is missing)

(Attachment modified-heart.svg is missing)

That’s strange. Attached is a screenshot of what I meant to send.

@futuregerald pinging you here in case you have another response for this person

So the usual debugging path is making sure that your build outputs the thing you expect, so we can see if it’s something that is happening DURING your build (probably means that there is some desync between how you build and how we build) or something happening AFTER your build, e.g. during asset optimization.

Could you check a download of your build to see if it’s what you’re expecting? The screenshot in this article shows how:

The build process outputs what I expect, the file is unmodified.

OK, that’s great, thank you for testing! I’d suggest you turn off asset optimization as this sounds like a bug and we don’t have any planned roadmap work on that, so that’s the best fix I know of for now. I’ll keep a copy of your svg as a good example to reproduce the bug, so thank you for that!

Once you’ve disabled asset optimization, you do need to redeploy to activate that change. Please let me know if it works any better!

Disabling asset optimization and redeploying did not fix it unfortunately. Thanks a lot for your time Chris!

@rynoV, I just tested that URL:

https://hilderman-photo.netlify.com/heart.svg

And this is the version sent:

<svg width="10px"  height="10px"
  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-heart" style="background: none;">
  <g transform="translate(50 50)" fill="#F98807" stroke="#F98807">
    <path ng-attr-fill="{{config.color}}" d="M40.7-34.3c-9.8-9.8-25.6-9.8-35.4,0L0-29l-5.3-5.3c-9.8-9.8-25.6-9.8-35.4,0l0,0c-9.8,9.8-9.8,25.6,0,35.4l5.3,5.3L-23,18.7l23,23l23-23L35.4,6.3L40.7,1C50.4-8.8,50.4-24.6,40.7-34.3z" fill="#F98807" transform="scale(0.68304 0.68304)">
      <animateTransform attributeName="transform" type="scale" calcMode="spline" values="0.68;0.8;0.6000000000000001;0.7200000000000001;0.68;0.6400000000000001" keyTimes="0;0.05;0.39;0.45;0.6;1" dur="1s" keySplines="0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1" begin="0s" repeatCount="indefinite"></animateTransform>
    </path>
    <path></path>
  </g>
</svg>

Which, as far as I can tell, is the expected version. It does appear the issue is resolved. Can you confirm if this is the case or if the issue is still ocurring?

1 Like

That is the correct version, however the SVG which is actually being used (For a loading animation for the images) still seems to be the wrong one. If you’re using Chrome or something similar you should be able to replicate this by using some network throttling to trigger the animation then going to the network tab and viewing the SVG code response.

@rynoV, I have created a support ticket to troubleshoot this and we’ll reply here when we have a resolution. Please let us know here if you do not receive an email about the ticket being created.