search

RazrFalcon / svgcleaner

svgcleaner could help you to clean up your SVG files from the unnecessary data.
GNU General Public License v2.0
1.62k stars 93 forks source link

Replace equal elements by the 'use' #40

Open RazrFalcon opened 7 years ago

RazrFalcon commented 7 years ago

Find duplicated graphical elements. Move one of them to the defs and link other to it via use.

Start from path and basic shapes.

setop commented 4 years ago

UP !

When an element is copy-paste, svg editors - at least inkcsape and msvisio - usually duplicate data. It can add up quite fast, especially when it is an image. It could drastically reduce svg size to detect duplicated elements and rewrite them as refences to a common de definition.

Here is an exemple drawing four stars:

without reuse :

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" stroke="#40cd00" stroke-width=".3">
        <path d="m52.916665 120.10715-5.069103-18.21122-17.875722-6.148416 15.753461-10.448581.323586-18.900785 14.805278 11.753643 18.075709-5.532916-6.603296 17.712732 10.847816 15.481253-18.886339-.80657z"/>
        <path d="m77.916665 165.10715-5.069104-18.21122-17.875721-6.14841 15.75346-10.44858.323587-18.90079 14.805278 11.75364 18.075713-5.53291-6.6033 17.71273 10.84782 15.48126-18.886343-.80658z"/>
        <path d="m137.916665 145.10715-5.069104-18.21122-17.875721-6.14841 15.75346-10.44858.323587-18.90079 14.805278 11.75364 18.075713-5.53291-6.6033 17.71273 10.84782 15.48126-18.886343-.80658z"/>
        <path d="m127.916665 209.10715-5.06911-18.21122-17.87572-6.14841 15.75346-10.44858.32359-18.90079 14.80528 11.75365 18.07571-5.53292-6.6033 17.71273 10.84782 15.48126-18.88634-.80658z"/>
    </g>
</svg>

gives 587 bytes

with reuse :

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="a" d="m52.916665 120.10715-5.069103-18.21122-17.875722-6.148416 15.753461-10.448581.323586-18.900785 14.805278 11.753643 18.075709-5.532916-6.603296 17.712732 10.847816 15.481253-18.886339-.80657z"/>
    </defs>
    <g fill="none" stroke="#40cd00" stroke-width=".3">
        <use xlink:href="#a"/>
        <use transform="translate(25 45)" xlink:href="#a"/>
        <use transform="translate(85 25)" xlink:href="#a"/>
        <use transform="translate(75 89)" xlink:href="#a"/>
    </g>
</svg>

gives 911 bytes

svgo does it for paths, but unfortunatly not for images. Do you think it worth to be added to svgcleaner ?

RazrFalcon commented 4 years ago

It will be implemented eventually.