Dompdf not generating pdf properly from SVG

I searched FOREVER until I finally came up with my own solution. I thought I should share in case it could be useful to anyone else. If you are using PHP the best solution to inline SVG images (for me) is to output it using BASE64_ENCODE() on the actual svg, then wrapping it in an image using the src as follows:

$svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" class="circular-chart">
    <path class="circle-bg"
          stroke-width="1"
          fill="none"
          stroke="#ddd"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
</svg>';

$html = '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'"  width="100" height="100" />';

The only issue you might find is weird dimensions on the actual image. You will have to mess with it on the PDF output to make sure it displays as desired. I needed to remove the width and height of the actual SVG to make sure it was sizing correctly. Again hope this helps!

This is not a matter of your css or html. Basically this comes down to dompdf rendering your your svg differently then the browser. dompdf is rendering each group/item within the svg xml individually into the displayed image, whereas the browser is defining each group/item as part as the whole image before rendering.

Your best options here are:

1. using PNG's instead of SVG's
   • this would definitely be the quickest solution if you're dealing with a small number of images, but if you're dealing with many images or auto-generated images this could become time consuming.
2. altering your SVG XML to fit fit the way dompdf is rendering.
   • this could solve your issue with dompdf rendering, but could lead to issues with browser rendering, and could also be time consuming based on number of images and source.
3. Opening an issue with dompdf
   • Probably the best long term solution, but the turn around time is unknown.
4. Alter the dompdf source code to solve your issue

I have generated some demo PDF with Svg's and it worked fine, you just need to add inline width and height to the image tag like this

<img width="400" src="yourpath/au.svg" />

P.S Do not set width in % just write like this width="400" inline img tag