The viewBox attribute on the root element is required.The viewBox establishes the coordinate space on to which x and y values inside the SVG data are placed.Without this information, converters cannot properly interpret the SVG data and translate it to the canvas.

We strongly recommend not using the width and height attributes on the root element.You will find that SVGs that only specify a viewBox work best in a document.That’s because the SVG data itself is infinitely scalable.By assigning an explicit width and height, you may end up limiting how the SVG can be sized or positioned in the document.It’s better to specify the width (or similar, such as pdfwidth) on the image macro instead, or using CSS.

You particularly want to avoid using a percentage width, such as width="100%".According to the SVG spec, this means using all available space, but without altering the aspect ratio.As a result, you can get a large gap above and below the SVG in page-oriented media, such as PDF.If you do specify a width and height, at least make sure the values are fixed and that they respect the aspect ratio of the data.