vektorna_grafika_svg [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Векторна графіка SVG ======
===== Ресурси =====
  * [[https://icomoon.io/app/#/select|icomoon - База векторних іконок та сервіс сворення SVG-спрайтів]]
===== Методи =====
  * **[[fill]]** - керує кольором заливки векторної картинки SVG
  * **stroke** - ще один метод встановки кольору заливки іконки. Для кривих. Потрібно дивитись на сам код опису іконки і дивитись - вона створена через fill або через stroke
===== Рекомендації =====
==== Вбудований SVG====
  * Додавання векторних зображень за допомогою елемента <img> або як фону через background-image використовується для статичної графіки, наприклад, абстрактного фону або іконок, для яких не потрібно додавати ефект ховеру або фокусу. 
  * У цих методів є один істотний недолік: немає можливості динамічно змінити колір або інші характеристики векторного зображення з CSS.
  * SVG-зображення можна додати повністю в HTML. Тобто відкрити SVG-файл у текстовому редакторі, скопіювати вміст і вставити його в HTML-документ. Це називається “вбудований SVG” (inline svg).
==== SVG-спрайт ====
це просто текстовий файл, в якому. на відміну від растрової графіки, описані фігури, які відтворюватиме браузер. В одному файлі можна описати безліч різних груп фігур, використовуючи елемент <symbol>, після чого, задавши кожному символу унікальний id, звернутися до будь-якого з них з HTML-документа.
  * Відкрий макет у Figma, обери там всі іконки й експортуй їх в SVG-форматі на свій комп’ютер.
  * Зайди на icomoon.io , натисни кнопку Import Icons зверху ліворуч та додай всі іконки.
  * Натисни Generate SVG & More внизу ліворуч.
  * Натиснути Download внизу ліворуч.
<code>
<svg width="78" hight="45">
  <use href="./шлях-до-svg-спрайту/имэя-спрайта.svg#ідентифікатор-символа"></use>
</svg>
</code>