optimize svg size

This commit is contained in:
tehcneko 2025-08-08 13:19:05 +01:00
commit 4ca10776ee
3 changed files with 29 additions and 60 deletions

View file

@ -1,6 +1 @@
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path stroke="gray" stroke-dasharray="1,1" d="M7.5 0v9M7 8.5h11" /></svg>
<line x1="7.5" y1="0" x2="7.5" y2="9" stroke="#808080" stroke-width="1"
stroke-dasharray="1,1" />
<line x1="7" y1="8.5" x2="18" y2="8.5" stroke="#808080" stroke-width="1"
stroke-dasharray="1,1" />
</svg>

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 136 B

Before After
Before After

View file

@ -1,52 +1,26 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(8,8)"> <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M8 4V1" opacity="0">
<g> <animate attributeName="opacity" begin="0s" dur="0.8s" repeatCount="indefinite" values="1;0" />
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0"> </path>
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0s" <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M10.828 5.172 12.95 3.05" opacity="0">
repeatCount="indefinite" /> <animate attributeName="opacity" begin="0.1s" dur="0.8s" repeatCount="indefinite" values="1;0" />
</line> </path>
</g> <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M12 8h3" opacity="0">
<g transform="rotate(45)"> <animate attributeName="opacity" begin="0.2s" dur="0.8s" repeatCount="indefinite" values="1;0" />
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0"> </path>
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.1s" <path stroke="#999" stroke-linecap="round" stroke-width="2" d="m10.828 10.828 2.122 2.122" opacity="0">
repeatCount="indefinite" /> <animate attributeName="opacity" begin="0.3s" dur="0.8s" repeatCount="indefinite" values="1;0" />
</line> </path>
</g> <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M8 12v3" opacity="0">
<g transform="rotate(90)"> <animate attributeName="opacity" begin="0.4s" dur="0.8s" repeatCount="indefinite" values="1;0" />
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0"> </path>
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.2s" <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M5.172 10.828 3.05 12.95" opacity="0">
repeatCount="indefinite" /> <animate attributeName="opacity" begin="0.5s" dur="0.8s" repeatCount="indefinite" values="1;0" />
</line> </path>
</g> <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M4 8H1" opacity="0">
<g transform="rotate(135)"> <animate attributeName="opacity" begin="0.6s" dur="0.8s" repeatCount="indefinite" values="1;0" />
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0"> </path>
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.3s" <path stroke="#999" stroke-linecap="round" stroke-width="2" d="M5.172 5.172 3.05 3.05" opacity="0">
repeatCount="indefinite" /> <animate attributeName="opacity" begin="0.7s" dur="0.8s" repeatCount="indefinite" values="1;0" />
</line> </path>
</g>
<g transform="rotate(180)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.4s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(225)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.5s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(270)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.6s"
repeatCount="indefinite" />
</line>
</g>
<g transform="rotate(315)">
<line y1="-4" y2="-7" stroke="#999999" stroke-width="2" stroke-linecap="round" opacity="0">
<animate attributeName="opacity" values="1;0" dur="0.8s" begin="0.7s"
repeatCount="indefinite" />
</line>
</g>
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

View file

@ -1,4 +1,4 @@
<svg width="2" height="20" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="2" height="20">
<rect x="0" y="0" width="1" height="20" fill="#fff" /> <path fill="#fff" d="M0 0h1v20H0z" />
<rect x="1" y="0" width="1" height="20" fill="#c4c4c4" /> <path fill="#c4c4c4" d="M1 0h1v20H1z" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 156 B

Before After
Before After