У нас есть SVG иконка happyface.svg, которую нужно добавить на страницу.
Установка графическим файлом
Тут все просто, иконка ставится как обычная картинка в нужное место:
|
1 |
<img src="/images/happyface.svg" width="128" height="128" alt="" /> |
Это очень простой и удобный способ, но у нас появляется дополнительный файл. А если таких картинок на странице много, то и определенные неудобства
Установка в HTML
Можно вставить SVG графику непосредственно в нужное место HTML кода:
|
1 2 3 4 5 6 |
<svg width="128" height="128" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#337AB7" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#337AB7"> <path d="M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328"/> <line stroke-linecap="round" x1="9" y1="9" x2="9" y2="9"/> <line stroke-linecap="round" x1="15" y1="9" x2="15" y2="9"/> <circle cx="12" cy="12" r="10"/> </svg> |
Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.
Установка через CSS
Можно сделать SVG графику фоновым изображением нужного элемента. Для этого переводим SVG код в CSS формат конвертером:
Подробнее об этом конвертере на codepen.io
Размеры блока с бекграундом задаются через CSS, поэтому атрибуты width='128' и height='128' в SVG коде не нужны
Получившийся результат вставляем в CSS нужного нам элемента, например:
|
1 2 3 4 5 |
.happyface { background-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23337AB7' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter' fill='none' color='%23337AB7'%3E %3Cpath d='M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328'/%3E %3Cline stroke-linecap='round' x1='9' y1='9' x2='9' y2='9'/%3E %3Cline stroke-linecap='round' x1='15' y1='9' x2='15' y2='9'/%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3C/svg%3E"); height: 128px; width: 128px; } |
И далее вставляем нужную нам иконку куда угодно и сколько угодно раз.
|
1 |
<div class="happyface"></div> |
Установка через JS
Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе
|
1 2 3 4 5 6 7 8 9 10 |
let icon = '<svg width="128" height="128" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#337AB7" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#337AB7">\ <path d="M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328"/> \ <line stroke-linecap="round" x1="9" y1="9" x2="9" y2="9"/> \ <line stroke-linecap="round" x1="15" y1="9" x2="15" y2="9"/> \ <circle cx="12" cy="12" r="10"/> \ </svg>'; // наша иконка let svgimg = document.querySelectorAll(".happyface"); // находим все элементы с классом happyface for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам svgimg[i].innerHTML = icon; // вставляем в них иконку } |
И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.
|
1 |
<div class="happyface"></div> |
На jQuery код получается проще:
|
1 2 |
let icon = '...'; // наша иконка $(".happyface").html(icon); // вставляем иконку в элемент с классом happyface |
Спасибо, отличная статья!
ОГРОМНОЕ СПАСИБО!