Различия

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

--- vektorna_grafika_svg [2023/09/26 18:19]
tro
+++ vektorna_grafika_svg [2023/10/03 16:57] (текущий)
tro [Методи]
@@ Строка 4: / Строка 4: @@
 ===== Методи =====
   * **[[fill]]** - керує кольором заливки векторної картинки SVG
+  * **stroke** - ще один метод встановки кольору заливки іконки. Для кривих. Потрібно дивитись на сам код опису іконки і дивитись - вона створена через fill або через stroke
 ===== Рекомендації =====
 ==== Вбудований SVG====
@@ Строка 9: / Строка 10: @@
   * У цих методів є один істотний недолік: немає можливості динамічно змінити колір або інші характеристики векторного зображення з CSS.
   * SVG-зображення можна додати повністю в HTML. Тобто відкрити SVG-файл у текстовому редакторі, скопіювати вміст і вставити його в HTML-документ. Це називається “вбудований SVG” (inline svg).
-==== SVG-спрайт (html)====
+==== SVG-спрайт ====
 це просто текстовий файл, в якому. на відміну від растрової графіки, описані фігури, які відтворюватиме браузер. В одному файлі можна описати безліч різних груп фігур, використовуючи елемент <symbol>, після чого, задавши кожному символу унікальний id, звернутися до будь-якого з них з HTML-документа.
   * Відкрий макет у Figma, обери там всі іконки й експортуй їх в SVG-форматі на свій комп’ютер.
@@ Строка 16: / Строка 17: @@
   * Натиснути Download внизу ліворуч.
 <code>
-<svg>
+<svg width="78" hight="45">
   <use href="./шлях-до-svg-спрайту/имэя-спрайта.svg#ідентифікатор-символа"></use>
 </svg>
 </code>