vektorna_grafika_svg

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
vektorna_grafika_svg [2023/09/25 18:38]
tro 		vektorna_grafika_svg [2023/10/03 16:57] (текущий)
tro [Методи]
Строка 1: Строка 1:
 ====== Векторна графіка SVG ====== ====== Векторна графіка SVG ======
 ===== Ресурси ===== ===== Ресурси =====
-  * [[https://icomoon.io/app/#/select|База векторних іконок та сервіс сворення SVG-спрайтів]] +  * [[https://icomoon.io/app/#/select|icomoon - База векторних іконок та сервіс сворення SVG-спрайтів]] 
-===== Властивості =====+===== Методи =====
   * **[[fill]]** - керує кольором заливки векторної картинки 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>
  • /sites/data/attic/vektorna_grafika_svg.1695667117.txt.gz
  • Последнее изменение: 2023/09/25 18:38
  • — tro