Automattic / gridicons

The WordPress.com icon set
http://automattic.github.io/gridicons/
GNU General Public License v2.0
110 stars 13 forks source link

Generated PDF is off center #316

Open Gio2018 opened 3 years ago

Gio2018 commented 3 years ago

Expected behavior: Once an icon is approved and grunt has been executed, the generated pdf file should be centered

Actual behavior: The generated pdf is off-center. As a reference these two pdf were recently auto-generated:

trending icon

recent icon

davewhitley commented 3 years ago

@folletto just in case you have any ideas here. Probably the pdf generator?

folletto commented 3 years ago

The problem doesn't seem to be in the PDF, but in the SVG. When I regenerate all the PDFs, I get all of them correct but a few specific images, like trending.

Guess: the SVG path is not centered, but drawn as if it's positioned at the origin. For some reason it still works when the SVG with the rectangle is generated, but it doesn't with PDF specs.

Digging a bit:

Sketch export:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>gridicons-trending</title>
    <g id="gridicons-trending" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="Path" fill="#000000" fill-rule="nonzero" points="16 6 18.29 8.29 13.41 13.17 9.41 9.17 2 16.59 3.41 18 9.41 12 13.41 16 19.71 9.71 22 12 22 6"></polygon>
    </g>
</svg>

Illustrator export:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<title>gridicons-trending</title>
<g id="gridicons-trending">
    <polygon id="Path" points="16,6 18.3,8.3 13.4,13.2 9.4,9.2 2,16.6 3.4,18 9.4,12 13.4,16 19.7,9.7 22,12 22,6     "/>
</g>
</svg>

Digging further:

Removing width="24px" height="24px" from the SVG tag declaration fixes it.