Elastic: Optimize svg images for size

pull/6796/head
Aleksander Machniak 5 years ago
parent 204a2c2d5b
commit 7e2e92909e

@ -1,11 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 640 640" style="enable-background:new 0 0 640 640; background-color: #f2f2f2;" xml:space="preserve">
<path style="fill:#cccccc;" d="M133.5,273.5c30.3,0,55-24.7,55-55s-24.7-55-55-55s-55,24.7-55,55S103.2,273.5,133.5,273.5z M518.5,273.5
c30.3,0,55-24.7,55-55s-24.7-55-55-55s-55,24.7-55,55S488.2,273.5,518.5,273.5z M546,301h-55c-15.1,0-28.8,6.1-38.8,16
c34.6,19,59.2,53.3,64.5,94h56.7c15.2,0,27.5-12.3,27.5-27.5V356C601,325.7,576.3,301,546,301z M326,301c53.2,0,96.2-43.1,96.2-96.2
s-43.1-96.2-96.2-96.2s-96.2,43.1-96.2,96.2S272.8,301,326,301z M392,328.5h-7.1c-17.9,8.6-37.7,13.8-58.9,13.8s-40.9-5.2-58.9-13.8
H260c-54.7,0-99,44.3-99,99v24.8c0,22.8,18.5,41.2,41.2,41.2h247.5c22.8,0,41.2-18.5,41.2-41.2v-24.8
C491,372.8,446.7,328.5,392,328.5z M199.8,317c-10-9.9-23.6-16-38.8-16h-55c-30.3,0-55,24.7-55,55v27.5c0,15.2,12.3,27.5,27.5,27.5
h56.6C140.5,370.3,165.1,336,199.8,317L199.8,317z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="background-color:#f2f2f2">
<path d="M133.5 273.5c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zm385 0c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zM546 301h-55c-15.1 0-28.8 6.1-38.8 16 34.6 19 59.2 53.3 64.5 94h56.7c15.2 0 27.5-12.3 27.5-27.5V356c.1-30.3-24.6-55-54.9-55zm-220 0c53.2 0 96.2-43.1 96.2-96.2s-43.1-96.2-96.2-96.2-96.2 43.1-96.2 96.2 43 96.2 96.2 96.2zm66 27.5h-7.1c-17.9 8.6-37.7 13.8-58.9 13.8s-40.9-5.2-58.9-13.8H260c-54.7 0-99 44.3-99 99v24.8c0 22.8 18.5 41.2 41.2 41.2h247.5c22.8 0 41.2-18.5 41.2-41.2v-24.8c.1-54.7-44.2-99-98.9-99zM199.8 317c-10-9.9-23.6-16-38.8-16h-55c-30.3 0-55 24.7-55 55v27.5c0 15.2 12.3 27.5 27.5 27.5h56.6c5.4-40.7 30-75 64.7-94z" fill="#ccc"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 802 B

@ -1,7 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; background-color: #f2f2f2;" xml:space="preserve">
<path style="fill:#cccccc;" d="M256,246c50.5,0,91.4-40.9,91.4-91.4S306.5,63.1,256,63.1s-91.4,40.9-91.4,91.4S205.5,246,256,246z M320,268.9
h-11.9c-15.9,7.3-33.5,11.4-52.1,11.4s-36.1-4.1-52.1-11.4H192c-53,0-96,43-96,96v29.7c0,18.9,15.4,34.3,34.3,34.3h251.4
c18.9,0,34.3-15.4,34.3-34.3v-29.7C416,311.9,373,268.9,320,268.9z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="background-color:#f2f2f2">
<path d="M256 246c50.5 0 91.4-40.9 91.4-91.4S306.5 63.1 256 63.1s-91.4 40.9-91.4 91.4S205.5 246 256 246zm64 22.9h-11.9c-15.9 7.3-33.5 11.4-52.1 11.4s-36.1-4.1-52.1-11.4H192c-53 0-96 43-96 96v29.7c0 18.9 15.4 34.3 34.3 34.3h251.4c18.9 0 34.3-15.4 34.3-34.3v-29.7c0-53-43-96-96-96z" fill="#ccc"/>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

After

Width:  |  Height:  |  Size: 400 B

@ -1,6 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="512px" viewBox="0 0 16 16">
<path fill="#888888" d="M6.7 16l9.3-9.3v-1.4l-10.7 10.7z"/>
<path fill="#888888" d="M9.7 16l6.3-6.3v-1.4l-7.7 7.7z"/>
<path fill="#888888" d="M12.7 16l3.3-3.3v-1.4l-4.7 4.7z"/>
<path fill="#888888" d="M15.7 16l0.3-0.3v-1.4l-1.7 1.7z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="#888" d="M6.7 16L16 6.7V5.3L5.3 16zM9.7 16L16 9.7V8.3L8.3 16zM12.7 16l3.3-3.3v-1.4L11.3 16zM15.7 16l.3-.3v-1.4L14.3 16z"/>
</svg>

Before

Width:  |  Height:  |  Size: 390 B

After

Width:  |  Height:  |  Size: 205 B

@ -1,15 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="9.14 141.8 573.65 573.65">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#404F54;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#E5E5E5;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#CCCCCC;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#37BEFF;}
</style>
<polygon class="st3" points="582.79,549.77 295.96,384.1 295.96,207.27 582.79,372.95 "/>
<polygon class="st0" points="9.14,549.77 295.96,384.1 295.96,207.27 9.14,372.95 "/>
<path class="st2" d="M295.96,141.8c109.56,0,198.41,88.85,198.41,198.41c0,109.56-88.85,198.41-198.41,198.41 c-109.56,0-198.41-88.85-198.41-198.41C97.55,230.65,186.4,141.8,295.96,141.8"/>
<path class="st1" d="M295.96,141.8c109.6,0,198.48,88.85,198.48,198.41c0,109.56-88.88,198.41-198.48,198.41 c-62.91-42.34-88.94-127.64-88.94-198.3S233.05,184.22,295.96,141.8"/>
<polygon class="st3" points="582.79,372.95 295.96,538.62 295.96,715.45 582.79,549.77 "/>
<polygon class="st0" points="9.14,372.95 295.96,538.62 295.96,715.45 9.14,549.77 "/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="9.14 141.8 573.65 573.65">
<style>
.st0,.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#404f54}.st3{fill:#37beff}
</style>
<path class="st3" d="M582.79 549.77L295.96 384.1V207.27l286.83 165.68z"/>
<path class="st0" d="M9.14 549.77L295.96 384.1V207.27L9.14 372.95z"/>
<path d="M295.96 141.8c109.56 0 198.41 88.85 198.41 198.41s-88.85 198.41-198.41 198.41S97.55 449.77 97.55 340.21 186.4 141.8 295.96 141.8" fill-rule="evenodd" clip-rule="evenodd" fill="#ccc"/>
<path d="M295.96 141.8c109.6 0 198.48 88.85 198.48 198.41s-88.88 198.41-198.48 198.41c-62.91-42.34-88.94-127.64-88.94-198.3s26.03-156.1 88.94-198.52" fill-rule="evenodd" clip-rule="evenodd" fill="#e5e5e5"/>
<path class="st3" d="M582.79 372.95L295.96 538.62v176.83l286.83-165.68z"/>
<path class="st0" d="M9.14 372.95l286.82 165.67v176.83L9.14 549.77z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 888 B

@ -53,5 +53,5 @@
@mail-header-photo-height: 4rem;
// Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");

@ -163,7 +163,6 @@
// Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
.ui-widget-content .ui-icon.ui-resizable-se {
background: @icon-resize-corner;
background-size: cover;
}
/* FIXME: why do I need !important here? */

Loading…
Cancel
Save