SVG - Історія редагувань

Lionardo: /* Спосіб 2. Використання background-image */

2015-11-13T15:48:24Z

‎Спосіб 2. Використання background-image

Lionardo: /* Які теги підтримує SVG? */

2015-11-13T15:46:32Z

‎Які теги підтримує SVG?

Lionardo: /* Спосіб 1. Використання тега */

2015-11-13T15:41:55Z

‎Спосіб 1. Використання тега

Lionardo: /* Спосіб 3. Просто вставити код в сторінку */

2015-11-13T15:41:34Z

‎Спосіб 3. Просто вставити код в сторінку

Lionardo: /* Які теги підтримує SVG? */

2015-11-13T15:41:15Z

‎Які теги підтримує SVG?

Lionardo: /* Які теги підтримує SVG? */

2015-11-13T15:40:55Z

‎Які теги підтримує SVG?

Lionardo в 15:34, 13 листопада 2015

2015-11-13T15:34:18Z

Lionardo в 15:11, 13 листопада 2015

2015-11-13T15:11:25Z

Lionardo: /* Структура SVG документа */

2015-11-13T11:01:27Z

‎Структура SVG документа

Lionardo: /* Працюємо з SVG */

2015-11-13T11:00:52Z

‎Працюємо з SVG

@@ Рядок 86: / Рядок 86: @@
 ==== Спосіб 2. Використання background-image====
- Використати SVG в якості фону за допомогою CSS-властивості background-image так само легко, як і вставка за допомогою тега <img>. [[#Проблема|Примітка]].
+Використати SVG в якості фону за допомогою CSS-властивості background-image так само легко, як і вставка за допомогою тега <img>. [[#Проблема|Примітка]].
   <a href="/" class="logo">
     Scalable Vector Graphics
@@ Рядок 107: / Рядок 108: @@
       background-image: url(logo.png);
+  }
 ====Спосіб 3. Просто вставити код в сторінку====

@@ Рядок 173: / Рядок 173: @@
 '''Примітивні фільтри'''
-  <feBlend>,  <feColorMatrix>,  <feComponentTransfer>,  <feComposite>,  <feConvolveMatrix>,  <feDiffuseLighting>,  <feDisplacementMap>,  <feFlood>,  <feFuncA>,  <feFuncB>,  <feFuncG>,  <feFuncR>,  <feGaussianBlur>,  <feImage>,  <feMerge>,  <feMergeNode>,  <feMorphology>,  <feOffset>,  <feSpecularLighting>,  <feTile>,  <feTurbulence>
+  <feBlend>,  <feColorMatrix>,  <feComponentTransfer>,  <feComposite>,  <feConvolveMatrix>,  <feDiffuseLighting>,
 '''Елементи шрифту'''

@@ Рядок 83: / Рядок 83: @@
   <img src="image.svg" onerror="this.onerror=null; this.src='image.png'">
 Але якщо бути уважним, то можна помітити, що вставляється зображення іншого формату, а не SVG.
-Або використовувати бібліотеку [[http://benhowdle.im/svgeezy/ SVGeezy]]. Пишуть, що допомагає. [[#Проблема|Примітка]].
+Або використовувати бібліотеку [http://benhowdle.im/svgeezy/ SVGeezy]. Пишуть, що допомагає. [[#Проблема|Примітка]].
-−
 ==== Спосіб 2. Використання background-image====

@@ Рядок 114: / Рядок 114: @@
 У разі використання серверної мови, який дозволяє отримати вміст файлу і вставити його в документ, ви принаймні зможете очистити свій документ від блоків SVG коду. Ось так:
   <?php include("Your_SVG_image.svg"); ?>
-Але перед цим, буде досить корисно оптимізувати зображення, прибравши в ньому все зайве, що може створити в ньому графічний редактор яким ви користувались для його створення. Пітер Коллінгрідж (Peter Collingridge) створив [[http://petercollingridge.appspot.com/svg_optimiser SVG Optimizer]], інструмент для онлайн-оптимізації SVG. Вивантажуєте старий файл, завантажуєте новий.
+Але перед цим, буде досить корисно оптимізувати зображення, прибравши в ньому все зайве, що може створити в ньому графічний редактор яким ви користувались для його створення. Пітер Коллінгрідж (Peter Collingridge) створив [http://petercollingridge.appspot.com/svg_optimiser SVG Optimizer], інструмент для онлайн-оптимізації SVG. Вивантажуєте старий файл, завантажуєте новий.
 Тепер можна керувати SVG-зображенням використовуючи CSS. Для SVG він трохи інший, але суть не змінюється. Сам код CSS можна вписати в код SVG або розмістити в загальному файлі стилів вашого проекта. Тегам в зображені SVG можна задавати класи і керувати ними як заманеться. Ось вам приклад, якщо навести курсор миші на коло, воно змінить колір:
   <html>

@@ Рядок 159: / Рядок 159: @@
 ===Які теги підтримує SVG?===
-Повний список елементів та можливостей роботи з ними можна знайти за посиланням [[http://www.w3.org/TR/SVG/expanded-toc.html Expanded Table of Contents]]. На думку розробників фірми Mozilla теги можна умовно поділити на такі категорії:
+Повний список елементів та можливостей роботи з ними можна знайти за посиланням [http://www.w3.org/TR/SVG/expanded-toc.html Expanded Table of Contents]. На думку розробників фірми Mozilla теги можна умовно поділити на такі категорії:
 '''Анімаційні ефекти'''

@@ Рядок 65: / Рядок 65: @@
 ==Працюємо з SVG==
 ===Як вставити SVG в HTML?===
 Розглянемо цілих 4 способи(!).

@@ Рядок 149: / Рядок 149: @@
   <object data="Your_SVG_image.svg" type="image/svg+xml" id="yuorID" width="100%"></object>
 Про IE навіть не питайте...
 ==Примітки==

@@ Рядок 61: / Рядок 61: @@
   </svg>
-[[Файл:RGB_Circles.png|right|200px| Результуюче зображення: "Приклад 1"]]
+[[Файл:RGB_Circles.png|right|180px| Результуюче зображення: "Приклад 1"]]
 Праворуч, на малюнку, зображено те, що описано в коді вище. Перші 2 теги, <?xml > та <svg>, ми вже розібрали. Усередині останнього знаходяться <rect>, <g> та <circle>. Не складно здогадатись, що <rect> відповідає за прямокутник (в даному випадку - квадратну рамку) з координатами лівого верхнього кута (0,0) та висотою і шириною 400 пікселів, без заливки (fill="none"), з контуром чорного кольору (stroke="black") товщиною в 5 пікселів (stroke-width="5px") та непрозорістю на 50% (stroke-opacity="0.5"). Тегом <g> групуються елементи SVG в один контейнер, при цьому всі елементи створеного контейнера перейматимуть атрибути, задані в відкриваючому тегі <g>. В прикладі, всім трьом колам, задається непрозорість заливки 70% (fill-opacity="0.7"), колір контуру чорний, та товщина контуру 0.5 пікселя. Тег <circle> дозволяє малювати кола дуже просто - задаємо координати центра cx та cy, радіус кола r та колір заливки fill.
 ==Працюємо з SVG==