search

alafr / SVG-to-PDFKit

Insert SVG into a PDF document created with PDFKit
MIT License
404 stars 115 forks source link

<rect> tag in svg #102

Closed baktiaditya closed 5 years ago

baktiaditya commented 5 years ago

I have 24px x 24px svg icon, when i generate the pdf it looks like <rect width="24" height="24" /> is not retained, it becomes 18px x 18px when i import to xcode.

svg string:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g fill="none" fill-rule="evenodd">
    <rect width="24" height="24" />
    <path
      stroke="#687176"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M7.21496269,18 L19.0845241,18 C19.9961885,18 20.7352385,17.26095 20.7352385,16.3492856 C20.7352385,16.0501036 20.6539279,15.7565464 20.5,15.5 L20.4565127,15.4275212 C19.5528965,13.9214942 17.9253624,13 16.1690481,13 L10.7440307,13 C10.3024224,13 9.91309955,12.7103318 9.78620437,12.2873479 L7.57469577,4.91565257 C7.23359373,3.77864575 6.18706997,3 5,3 L4.10498756,3 C3.55270281,3 3.10498756,3.44771525 3.10498756,4 C3.10498756,4.03322976 3.10664389,4.06643887 3.10995037,4.09950372 L4.22985112,15.2985112 C4.38321165,16.8321165 5.67370834,18 7.21496269,18 Z M7,21 L17,21"
      />
    <path stroke="#0194F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13,10 L17,10" />
  </g>
</svg>

how to retain the <rect width="24" height="24" /> tag? thank you

alafr commented 5 years ago

That's because SVG units are pixels (unless specified otherwise) and PDF units are points. 24 px are equal to 18 pt. You can use the {assumePt: true} option that converts pixels to pdf points without scaling, or specify the unit in the svg width and height: <svg xmlns="http://www.w3.org/2000/svg" width="24pt" height="24pt" viewBox="0 0 24 24">