search

neocotic / convert-svg

Node.js packages for converting SVG into other formats using headless Chromium
MIT License
200 stars 47 forks source link

Fix inline svg element with small size #71

Closed ghost closed 3 years ago

ghost commented 4 years ago

Example image

<?xml version="1.0" encoding="UTF-8" ?>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#0000FF" height="5" width="5" x="0" y="0"/>
</svg>

If a svg image has a small height, Puppeteer / Chromium will render it with a top margin and the screenshot for the png image at 0:0 position will end in a transparent image or partially cut image wrong

This is because svg is an inline element and vertical-align is baseline and font-size is 16px by default

This PR fix it by style the svg element vertical-align: top correct

More infos at https://stackoverflow.com/questions/22337292/spurious-margin-on-svg-element#answer-22337325

The tests are already broken before in your master / develop branch

May https://github.com/neocotic/convert-svg/issues/59 is also fixed with this PR