CSS – Author created SGG graphic in HTML not displaying / scaling properly

  • Home / Blog / CSS – Author…

CSS – Author created SGG graphic in HTML not displaying / scaling properly

I created this Instagram icon in Alastair. I am trying to display it correctly on an HTML page but it is not working properly. After exporting the SVG image, I copied the SGG code generated by LTL to my HTML and it comes up with ridiculous scales. Cutting off some edges and thickening the stroke. It appears to be independent of the parent element.

Scaling the SGG using its height and width properties or transformers does nothing, and the dimensions of the viewbox match the image. Check out the screenshots.

Generated SGG code:

<svg viewBox="0 0 22 22">
    <g id="Shape">
      <path class="cls-1" d="M16,22.2H6.41A6.21,6.21,0,0,1,.2,16V6.41A6.22,6.22,0,0,1,6.41.2H16a6.21,6.21,0,0,1,6.2,6.21V16A6.21,6.21,0,0,1,16,22.2ZM6.41,2.2A4.22,4.22,0,0,0,2.2,6.41V16a4.21,4.21,0,0,0,4.21,4.2H16A4.2,4.2,0,0,0,20.2,16V6.41A4.21,4.21,0,0,0,16,2.2Z"/>
      <path class="cls-1" d="M11.2,17A5.78,5.78,0,1,1,17,11.2,5.79,5.79,0,0,1,11.2,17Zm0-9.56A3.78,3.78,0,1,0,15,11.2,3.79,3.79,0,0,0,11.2,7.42Z"/>
      <circle class="cls-1" cx="17" cy="5.14" r="1.25"/>
    </g>
  </svg>

What it looks like in the browser:
Enter the pictorial description here

Write a Comment

Your email address will not be published. Required fields are marked *

x