4

First off - I have very little experience working with SVGs beyond using them as image files.

I have an SVG file I got from a third-party vendor. Whenever I save the SVG, it sets the width and height to 1146px. If I remove those attributes, embed the SVG in my html file with a set width/height of 16px, the svg is 16x16, but the path is still the full 1146px wide.

I have tried exporting the file from Affinity Designer with the Export Setting "Use relative coordinates" checked - no luck. I have also tried exporting from Inkscape 1.2 with the Preference: Input/Output > SVG output > Path data > Path string format: Relative setting. Also no luck.

Looking at the raw SVG code, it looks like the path coordinates aren't being changed. Any advice as to how I can make this SVG actually responsive?

Here's the SVG, run through SVGOMG:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1146" height="1146" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
  <path d="M572.8 1145.7A573 573 0 0 1 0 572.8 573 573 0 0 1 572.8 0h429.7c79 0 143.2 64.2 143.2 143.2v429.6a573 573 0 0 1-572.9 572.9z" style="fill:#148fcc;fill-rule:nonzero"/>
  <path d="M564.3 856.5c7.3 4.6 18.3 3.4 23.2-3.5L781 602l45.2-58.4c11-13.8 0-33.2-18.3-33.2H516.5l71-202.9c2.5-6.9 0-13.8-6.1-18.3-7.4-4.6-18.4-3.5-23.3 3.4L364.7 544.7l-45.3 58.5c-11 13.7 0 33.2 18.4 33.2h291.3l-71 202.9c-2.4 5.7 0 13.7 6.2 17.2z" style="fill:#fff;fill-rule:nonzero"/>
</svg>
Improve this question
2
  • Have you tried just removing the width and height from the SVG itself? I'm not sure I understand "the path is still really wide".
    – Scott
    Jan 26 at 18:25
  • Yes, I've tried that. When I investigate the svg in the browser's dev tools, the highlighting box surrounding the svg element is 16px wide. When I hover over the first path node, the highlighting box surrounding that path element is still 1145px-ish wide.
    – Quasipickle
    Jan 26 at 18:29

1 Answer 1

Reset to default
4

You need a 'viewBox'-attribute. Try adding viewBox="0 0 1146 1146" to the <svg>-element. You may also want to look into the 'preserveAspectRatio'-attribute.

Improve this answer
1
  • I explicitly told it to remove the viewbox. Adding it back and adding the preserveAspectRatio attribute totally fixed the problem. Thanks!
    – Quasipickle
    Jan 26 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.