use viewBox in svg images

This commit is contained in:
Max Pozdeev 2020-09-11 18:44:47 +03:00
parent d637240272
commit 82689265f6
15 changed files with 21 additions and 15 deletions

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polyline points="15 4, 15 9, 2 9" stroke-width="1.5" stroke="#000" fill="none" />
<polyline points="6 5, 1 9, 6 13" stroke-width="1.5" stroke="#000" fill="none" />
</svg>

Before

Width:  |  Height:  |  Size: 241 B

After

Width:  |  Height:  |  Size: 237 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polygon points="10 3, 4 8, 10 13" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 122 B

After

Width:  |  Height:  |  Size: 118 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polygon points="6 3, 12 8, 6 13" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 121 B

After

Width:  |  Height:  |  Size: 117 B

View file

@ -1 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><path fill="#fff" d="M0.5 1.5H15.5V14.5H0.5z"/><path fill="#788b9c" d="M15,2v12H1V2H15 M16,1H0v14h16V1L16,1z"/><path fill="#f78f8f" d="M0.5 1.5H15.5V4.5H0.5z"/><path fill="#c74343" d="M15,2v2H1V2H15 M16,1H0v4h16V1L16,1z"/><path fill="#c5d4de" d="M5 7H6V8H5zM7 7H8V8H7zM9 7H10V8H9zM11 7H12V8H11zM3 9H4V10H3zM5 9H6V10H5zM7 9H8V10H7zM9 9H10V10H9zM11 9H12V10H11zM3 11H4V12H3zM5 11H6V12H5zM7 11H8V12H7zM9 11H10V12H9z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="#fff" d="M0.5 1.5H15.5V14.5H0.5z"/>
<path fill="#788b9c" d="M15,2v12H1V2H15 M16,1H0v14h16V1L16,1z"/>
<path fill="#f78f8f" d="M0.5 1.5H15.5V4.5H0.5z"/>
<path fill="#c74343" d="M15,2v2H1V2H15 M16,1H0v4h16V1L16,1z"/>
<path fill="#c5d4de" d="M5 7H6V8H5zM7 7H8V8H7zM9 7H10V8H9zM11 7H12V8H11zM3 9H4V10H3zM5 9H6V10H5zM7 9H8V10H7zM9 9H10V10H9zM11 9H12V10H11zM3 11H4V12H3zM5 11H6V12H5zM7 11H8V12H7zM9 11H10V12H9z"/>
</svg>

Before

Width:  |  Height:  |  Size: 507 B

After

Width:  |  Height:  |  Size: 491 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polyline points="4 8, 7 12, 13 5" fill="none" stroke-width="2" stroke="#000" />
</svg>

Before

Width:  |  Height:  |  Size: 152 B

After

Width:  |  Height:  |  Size: 149 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g stroke-width="1.5" fill="none">
<path d="M12.0 12.0l-8-8" stroke="#7f7f7f"/>
<path d="M4.0 12.0l+8-8" stroke="#7f7f7f"/>

Before

Width:  |  Height:  |  Size: 199 B

After

Width:  |  Height:  |  Size: 196 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g stroke-width="1.5" fill="none">
<path d="M12.0 12.0l-8-8" stroke="#000"/>
<path d="M4.0 12.0l+8-8" stroke="#000"/>

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 190 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
<polygon points="6 2, 12 8, 6 14" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 187 B

After

Width:  |  Height:  |  Size: 183 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<defs>
<linearGradient id="gradient1" x1="10%" y1="90%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#fff"/>

Before

Width:  |  Height:  |  Size: 860 B

After

Width:  |  Height:  |  Size: 856 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke="#333" />
<line x1="8" y1="3" x2="8" y2="13" stroke-width="2" stroke="#333" />
</svg>

Before

Width:  |  Height:  |  Size: 211 B

After

Width:  |  Height:  |  Size: 207 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<title>RSS feed icon</title>
<style type="text/css">
.button {stroke: none; fill: #bbb;}

Before

Width:  |  Height:  |  Size: 540 B

After

Width:  |  Height:  |  Size: 517 B

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<title>RSS feed icon</title>
<style type="text/css">
.button {stroke: none; fill: orange;}

Before

Width:  |  Height:  |  Size: 542 B

After

Width:  |  Height:  |  Size: 519 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g stroke-width="1.5" fill="none">
<circle cx="8" cy="8" r="7" fill="#000"/>
<path d="M11.0 11.0l-6-6" stroke="#ffffff"/>

Before

Width:  |  Height:  |  Size: 241 B

After

Width:  |  Height:  |  Size: 238 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g stroke-width="1.5" stroke="#7f7f7f" fill="none">
<path d="M14 14l-4-4"/>
<circle cx="7" cy="7" r="4.5"/>

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 180 B

View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<circle cx="3" cy="8" r="1.5" fill="#333"/>
<circle cx="8" cy="8" r="1.5" fill="#333"/>
<circle cx="13" cy="8" r="1.5" fill="#333"/>

Before

Width:  |  Height:  |  Size: 204 B

After

Width:  |  Height:  |  Size: 200 B