SVG

SVG чаще всего используется для иконок или логотипов, для того, что бы вы не видели пикселей на своём мониторе или телефоне. Вот вам демонстрация:
SVG
Нагляднее сразу видны преимущества SVG, перед PNG.

Теперь попробуем создать наше изображение в SVG:
Возьмем изображение в формате png, у меня это будет apple
Я использую онлайн сервис picsvg, но вы можете установить Adobe Illustrator, где вы получите гораздо больше возможностей.
На выходе я получаю .svg файл и в нём
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="900.000000pt" height="726.000000pt" viewBox="0 0 900.000000 726.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,726.000000) scale(0.100000,-0.100000)"
fill="#1e1e1e" stroke="none">
<path d="M5700 6394 c-30 -9 -89 -25 -130 -36 -41 -11 -79 -24 -84 -29 -6 -5
-16 -9 -24 -9 -17 0 -189 -85 -252 -125 -166 -105 -356 -286 -456 -436 -62
-93 -61 -92 -108 -186 -21 -43 -42 -86 -47 -95 -47 -92 -112 -387 -107 -479
l3 -54 65 0 c73 0 192 19 261 40 26 8 54 15 63 15 8 0 30 6 48 14 18 8 53 22
78 31 349 136 642 409 820 764 78 156 129 345 132 491 l3 105 -105 2 c-68 1
-125 -4 -160 -13z"/>
<path d="M3360 4975 c-102 -12 -141 -20 -245 -51 -199 -61 -393 -176 -541
-321 -136 -134 -217 -248 -298 -418 -21 -44 -45 -92 -52 -107 -8 -14 -14 -33
-14 -42 0 -8 -6 -30 -14 -48 -97 -227 -123 -688 -60 -1048 43 -247 159 -649
239 -835 7 -16 35 -82 61 -145 65 -154 162 -342 225 -438 16 -24 29 -45 29
-47 0 -2 14 -26 32 -52 118 -177 283 -358 416 -456 76 -56 106 -74 194 -118
38 -19 154 -39 226 -39 138 0 243 28 467 125 17 7 50 20 75 30 25 9 56 22 70
27 104 41 387 83 490 73 93 -9 227 -32 285 -49 51 -15 176 -61 345 -126 30
-12 69 -25 86 -30 18 -4 36 -10 42 -14 22 -14 181 -36 257 -35 148 0 276 49
427 163 166 126 305 292 483 576 45 71 171 321 210 418 20 48 43 101 50 117
18 39 27 97 18 111 -5 6 -35 30 -68 54 -171 126 -333 343 -413 555 -91 242
-113 446 -72 670 65 357 200 584 499 835 l53 45 -46 62 c-138 188 -367 375
-546 447 -25 10 -58 24 -75 30 -166 71 -434 107 -628 87 -147 -16 -229 -35
-407 -97 -41 -14 -88 -29 -105 -33 -16 -5 -41 -13 -55 -18 -28 -12 -105 -34
-197 -57 -40 -10 -106 -16 -183 -16 -136 0 -222 18 -425 87 -38 14 -84 28
-101 32 -18 5 -37 12 -44 16 -7 4 -26 11 -44 16 -17 4 -67 17 -111 29 -89 24
-291 50 -375 48 -30 0 -102 -6 -160 -13z"/>
</g>
</svg>
 Далее нам нужно оптимизировать наше векторное изображение, для этого воспользуемся опять онлайн сервисом svg-editor
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="900" height="726" viewBox="0 0 900 726" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,726.000000) scale(0.100000,-0.100000)" fill="#1e1e1e" stroke="none"><path d="M5700 6394c-30-9-89-25-130-36-41-11-79-24-84-29-6-5-16-9-24-9-17 0-189-85-252-125-166-105-356-286-456-436-62-93-61-92-108-186-21-43-42-86-47-95-47-92-112-387-107-479l3-54 65 0c73 0 192 19 261 40 26 8 54 15 63 15 8 0 30 6 48 14 18 8 53 22 78 31 349 136 642 409 820 764 78 156 129 345 132 491l3 105-105 2c-68 1-125-4-160-13zM3360 4975c-102-12-141-20-245-51-199-61-393-176-541-321-136-134-217-248-298-418-21-44-45-92-52-107-8-14-14-33-14-42 0-8-6-30-14-48-97-227-123-688-60-1048 43-247 159-649 239-835 7-16 35-82 61-145 65-154 162-342 225-438 16-24 29-45 29-47 0-2 14-26 32-52 118-177 283-358 416-456 76-56 106-74 194-118 38-19 154-39 226-39 138 0 243 28 467 125 17 7 50 20 75 30 25 9 56 22 70 27 104 41 387 83 490 73 93-9 227-32 285-49 51-15 176-61 345-126 30-12 69-25 86-30 18-4 36-10 42-14 22-14 181-36 257-35 148 0 276 49 427 163 166 126 305 292 483 576 45 71 171 321 210 418 20 48 43 101 50 117 18 39 27 97 18 111-5 6-35 30-68 54-171 126-333 343-413 555-91 242-113 446-72 670 65 357 200 584 499 835l53 45-46 62c-138 188-367 375-546 447-25 10-58 24-75 30-166 71-434 107-628 87-147-16-229-35-407-97-41-14-88-29-105-33-16-5-41-13-55-18-28-12-105-34-197-57-40-10-106-16-183-16-136 0-222 18-425 87-38 14-84 28-101 32-18 5-37 12-44 16-7 4-26 11-44 16-17 4-67 17-111 29-89 24-291 50-375 48-30 0-102-6-160-13z"/></g></svg>
 Всё, svg готово. Теперь создадим файл sprite.svg 
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-logo" viewBox="0 0 900 726">
<title>logo</title>
<g transform="translate(0.000000,726.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none"><path  class="path1" d="M5700 6394c-30-9-89-25-130-36-41-11-79-24-84-29-6-5-16-9-24-9-17 0-189-85-252-125-166-105-356-286-456-436-62-93-61-92-108-186-21-43-42-86-47-95-47-92-112-387-107-479l3-54 65 0c73 0 192 19 261 40 26 8 54 15 63 15 8 0 30 6 48 14 18 8 53 22 78 31 349 136 642 409 820 764 78 156 129 345 132 491l3 105-105 2c-68 1-125-4-160-13zM3360 4975c-102-12-141-20-245-51-199-61-393-176-541-321-136-134-217-248-298-418-21-44-45-92-52-107-8-14-14-33-14-42 0-8-6-30-14-48-97-227-123-688-60-1048 43-247 159-649 239-835 7-16 35-82 61-145 65-154 162-342 225-438 16-24 29-45 29-47 0-2 14-26 32-52 118-177 283-358 416-456 76-56 106-74 194-118 38-19 154-39 226-39 138 0 243 28 467 125 17 7 50 20 75 30 25 9 56 22 70 27 104 41 387 83 490 73 93-9 227-32 285-49 51-15 176-61 345-126 30-12 69-25 86-30 18-4 36-10 42-14 22-14 181-36 257-35 148 0 276 49 427 163 166 126 305 292 483 576 45 71 171 321 210 418 20 48 43 101 50 117 18 39 27 97 18 111-5 6-35 30-68 54-171 126-333 343-413 555-91 242-113 446-72 670 65 357 200 584 499 835l53 45-46 62c-138 188-367 375-546 447-25 10-58 24-75 30-166 71-434 107-628 87-147-16-229-35-407-97-41-14-88-29-105-33-16-5-41-13-55-18-28-12-105-34-197-57-40-10-106-16-183-16-136 0-222 18-425 87-38 14-84 28-101 32-18 5-37 12-44 16-7 4-26 11-44 16-17 4-67 17-111 29-89 24-291 50-375 48-30 0-102-6-160-13z"></path></g>
</symbol>
</defs>
</svg>
Подключаем наш SVG файл на сайт, для этого добавим JS
    <script type="text/javascript">
        jQuery(function($){
            $.get("ПУТЬ ДО ФАЙЛА/sprite.svg", function(data) {
              var div = document.createElement("div");
              div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
              document.body.insertBefore(div, document.body.childNodes[0]);
            });
        });
    </script>
и естественно должна быть подключена библиотека jQuery.

Добавим CSS для "внешнего вида" нашего SVG.
.icon {
    display: inline-block;
    width: 1em; height: 1em;
    fill: #ffffff;
    vertical-align: middle;
}
    .icon-logo { width: 100px; height: 100px; }
Всё! Теперь осталось только добавить в нужное нам место
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
Благодоря js, svg и css мы сохранили красивый вид html файла и упростили добавление новых иконок на сайт.

Рекомендую сервис flaticon, у них более 172 тысяч разных иконок, в том числе в формате png и svg

Добавить комментарий

Автору будет очень приятно узнать обратную связь о своей новости.

Комментариев 0