From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../svg/tutorial/clipping_and_masking/index.html | 87 ++++++++ .../web/svg/tutorial/fills_and_strokes/index.html | 145 +++++++++++++ .../ru/web/svg/tutorial/filter_effects/index.html | 14 ++ .../ru/web/svg/tutorial/getting_started/index.html | 93 ++++++++ files/ru/web/svg/tutorial/gradients/index.html | 181 ++++++++++++++++ files/ru/web/svg/tutorial/index.html | 56 +++++ .../svg/tutorial/other_content_in_svg/index.html | 39 ++++ files/ru/web/svg/tutorial/paths/index.html | 234 +++++++++++++++++++++ files/ru/web/svg/tutorial/patterns/index.html | 76 +++++++ files/ru/web/svg/tutorial/svg_fonts/index.html | 98 +++++++++ files/ru/web/svg/tutorial/svg_image_tag/index.html | 34 +++ .../tutorial/svg_in_html_introduction/index.html | 115 ++++++++++ files/ru/web/svg/tutorial/texts/index.html | 74 +++++++ files/ru/web/svg/tutorial/tools_for_svg/index.html | 72 +++++++ .../index.html" | 98 +++++++++ .../index.html" | 44 ++++ .../index.html" | 144 +++++++++++++ .../index.html" | 48 +++++ 18 files changed, 1652 insertions(+) create mode 100644 files/ru/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/ru/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/ru/web/svg/tutorial/filter_effects/index.html create mode 100644 files/ru/web/svg/tutorial/getting_started/index.html create mode 100644 files/ru/web/svg/tutorial/gradients/index.html create mode 100644 files/ru/web/svg/tutorial/index.html create mode 100644 files/ru/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/ru/web/svg/tutorial/paths/index.html create mode 100644 files/ru/web/svg/tutorial/patterns/index.html create mode 100644 files/ru/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/ru/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/ru/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/ru/web/svg/tutorial/texts/index.html create mode 100644 files/ru/web/svg/tutorial/tools_for_svg/index.html create mode 100644 "files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" create mode 100644 "files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" (limited to 'files/ru/web/svg/tutorial') diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..f5d2198fc8 --- /dev/null +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,87 @@ +--- +title: Обрезка и маска +slug: Web/SVG/Tutorial/Clipping_and_masking +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +


+ {{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}

+ +

 

+ +

На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.
+
+ Обрезка (Clipping) позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».
+
+ Маска, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).

+ +

Кадрирование изображений

+ +

Мы можем создать полукруг на основе окружности:

+ +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="cut-off-bottom">
+      <rect x="0" y="0" width="200" height="100" />
+    </clipPath>
+  </defs>
+
+  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+</svg>
+
+ +

По центру (100,100) нарисован круг с радиусом 100. Атрибут clip-path ссылается на элемент {{ SVGElement("clipPath") }}, который содержит элемент rect. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент clipPath обычно помещается в раздел defs.
+
+ При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:

+ +

{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}

+ +

Теперь мы получили полуокружность без необходимости использования элемента path.  При “обрезке” каждый путь внутри clipPath проверяется и оценивается вместе с его свойствами stroke и transform. Другими словами, все что не находится в залитой области clipPath не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.

+ +

Маска

+ +

Хороший пример использования маски - это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+
+ +

Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут mask, который ссылается на элемент mask. Содержимое маски это элемент rect, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: 

+ +

{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}

+ +

Прозрачность opacity

+ +

Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут opacity:

+ +
<rect x="0" y="0" width="100" height="100" opacity=".5" />
+
+ +

Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута fill-opacity и stroke-opacity. Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность  контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="200" height="200" fill="blue" />
+  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+</svg>
+
+ +

{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}

+ +

В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

+ +

Использование хорошо известных CSS техник

+ +

Одним из мощных инструментов является display: none. Поэтому неудивительно, что было принято решение использовать это CSS  свойство в SVG вместе с visibility и clip, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG  - inline.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}

diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..0caf2a76c5 --- /dev/null +++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,145 @@ +--- +title: Заливка и обводка +slug: Web/SVG/Tutorial/Fills_and_Strokes +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}

+ +

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

+ +

Атрибуты заливки и обводки (Fill and Stroke Attributes)

+ +

Раскраска (Painting)

+ +

Основная раскраска может быть сделана установкой двух свойств на ноде - fill и stroke. Fill - устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML - названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

+ +
 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/>
+
+ +

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

+ +
Замечание: в Файрфокс 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity - будут применены оба.
+ +

Обводка (Stroke)

+ +

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
+  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
+  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
+</svg>
+ +

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.

+ +

Второй атрибут, влияющий на обводку - свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображениеи концов линий.

+ +

Есть три возможных значения для stroke-linecap:

+ + + +

Используйте stroke-linejoin, чтобы определить, как соединять обводку двух сегментов линии.

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
+
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
+</svg>
+ +

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin. Есть три возможных значения для этого атрибута:

+ + + +

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray.

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+ +

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделенных запятой.

+ +
+

Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

+
+ +

Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.

+ +

Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

+ +

Использование CSS (Using CSS)

+ +

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill, stroke, stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width, height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

+ +
Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые - нет.
+ +

CSS может использоваться инлайн через атрибут style:

+ +
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+
+ +

или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+ +

Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:

+ +
 #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+ +

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

+ +
<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
+
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+ +

где style.css выглядит примерно так

+ +
#MyRect {
+  fill: red;
+  stroke: black;
+}
+ +

{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}

diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..d063063795 --- /dev/null +++ b/files/ru/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,14 @@ +--- +title: Фильтры +slug: Web/SVG/Tutorial/Filter_effects +translation_of: Web/SVG/Tutorial/Filter_effects +--- +

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

+ +

Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определенного эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. 
+
+ Основным примером может послужить эффект размытия в SVG. Базовый эффект размытия может быть достигнут с помощью градиентов, фильтр размытия необходим, чтобы сделать что-либо большее.

+ +

Вы можете получить полную информацию об SVG фильтрах на W3C Recommendation.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..5882814c4a --- /dev/null +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,93 @@ +--- +title: Начало работы +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

Простой пример

+ +

Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите сюда):

+ +

svgdemo1.png

+ +

Процесс отображения включает следующее:

+ +
    +
  1. Мы начинаем с корневого элемента svg: + +
      +
    • как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает
      • +
    • до SVG 2, чтобы обозначить версию SVG для других типов вилидации, всегда следует использовать атрибуты version и baseProfile. Но в SVG 2 оба эти атрибута version и baseProfile обрели статус не рекомендованных
      • +
    • как диалект XML, SVG всегда правильно должен связывать простанства имен (в атрибуте xmlns). Смотри страницу Namespaces Crash Course для большей информации.
      • +
    +
    2. +
  2. Фон устанавливается красным при помощи рисования прямоугольника <rect/>, который покрывает всю область изображения
    3. +
  3. Зеленый круг <circle/> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).
    4. +
  4. Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
    5. +
+ +

Основные свойства файлов SVG

+ + + +

Типы SVG файлов

+ +

Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.

+ +

Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на вебсервере, в корректной работе которого вы уверены (смотри ниже).

+ +

Слово о Вебсерверах

+ +

Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

Вы можете проверить, правильные ли заголовки HTTP  посылает ваш сервер с файлами SVG, используя Network Monitor panel или сайт, такой как web-sniffer.net. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри server configuration page на странице SVG wiki о ряде простых решений.

+ +

Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..bdb5e39461 --- /dev/null +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -0,0 +1,181 @@ +--- +title: Градиенты +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +

{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

+ +

Возможность создания и использования градиентов, также как заливки и обводки, более интересна, чем просто заливка или обводка.

+ +

Есть два типа градиентов: линейный и радиальный. Вы должны присвоить градиенту атрибут id, в противном случае на него не смогут ссылаться другие элементы внутри файла. Градиенты определяются в секции defs, а не в самой фигуре. Это позволяет их использовать многократно.

+ +

Линейный градиент (Linear Gradient)

+ +

Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить градиент, нужно создать ноду {{SVGElement('linearGradient')}} внутри секции <defs> SVG файла.

+ +

Basic example

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]></style>
+  </defs>
+
+  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+
+</svg>
+ +

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

+ +

Выше находится пример линейного градиента, который применен к элементу <rect>. Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом offset для позиции и атрибутом stop-color. Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, Gradient1 начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут stop-opacity, чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).

+ +
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
+ +

Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта fill/stroke. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя url. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "Gradient". Чтобы добавить его, установим fill="url(#Gradient)". Наш объект теперь многоцветный. То же самое можно сделать с атрибутом stroke.

+ +

Элемент <linearGradient> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами x1, x2, y1, y2. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.

+ +
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
+ +
+

Замечание: Вы также можете использовать атрибут xlink:href для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2.

+ +
 <linearGradient id="Gradient1">
+   <stop id="stop1" offset="0%"/>
+   <stop id="stop2" offset="50%"/>
+   <stop id="stop3" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+
+ +

Я включил пространство имён xlink прямо в ноду, хотя обычно вы хотели бы определить его в верхней части вашего документа. Подробнее об этом мы поговорим в разделе изображений.

+
+ +

Радиальные градиенты

+ +

Радиальные градиенты похожи на линейные, но рисуют градиент, который "излучается" из точки. Для создания градиента Вам необходимо добавить элемент {{SVGElement('radialGradient')}} в секцию defs.

+ +

Basic example

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="RadialGradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
+
+</svg>
+ +

{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

+ +

Аттрибуты stop, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <radialGradient> может иметь несколько аттрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как cx и cy, и радиус - r. Изменяя эти аттрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.

+ +

Вторая "точка" называется фокальной и задается аттрибутами fx и fy. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его середина. Это легко увидеть на примере.

+ +

Center and focal point

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+
+</svg>
+ +

{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

+ +

Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.

+ +

Линейный и радиальный градиенты также принимают несколько аттрибутов, описывающих как они могут изменяться. Единственный аттрибут, о котором я хотел бы рассказать более подробно - это spreadMethod. Этот аттрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:"pad", "reflect", или"repeat". "Pad" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.

+ +

spreadMethod

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+
+</svg>
+ +

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

+ +

У обоих типов градиентов также есть атрибут gradientUnits, который описывает систему измерений, которую Вы собираетесь использовать, когда описываете размеры или ориентацию или градиен. Данный атрибут принимает 2 возможных значения: userSpaceOnUse или objectBoundingBox (дефолтное, показывалось во всех примерах выше). objectBoundingBox автоматически адаптирует градиент к размеру объекта, так что Вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. userSpaceOnUse позиционирует градиент в абсолютных единицах измерения, так что Вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient  выше может быть переписан:

+ +
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
+
+ +

Вы также можете применить иную трансформацию к градиенту, используя аттрибут gradientTransform, но мы пока что его не изучали, я осталю это на потом.
+
+ Существуют и другие предостережения для работы с 
+ gradientUnits="objectBoundingBox", когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

diff --git a/files/ru/web/svg/tutorial/index.html b/files/ru/web/svg/tutorial/index.html new file mode 100644 index 0000000000..ef0fc0459c --- /dev/null +++ b/files/ru/web/svg/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: SVG — учебное руководство +slug: Web/SVG/Tutorial +tags: + - Intermediate + - NeedsContent + - NeedsUpdate + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial +--- +

Масштабируемая векторная графика (SVG), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.

+ +

Это учебное пособие призвано обьяснить Вам суть технологии SVG и ознакомить с её техническими деталями. Если Вы хотите только рисовать красивые изображения, то Вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C SVG Primer.

+ +
Это учебное пособие находится в стадии разработки. Если Вы можете, то, пожалуйста, помогите с написанием одного или нескольких параграфов. Плюс балл Гриффиндору за написание целой страницы!
+ +
Введение в SVG
+ + + +

Следующие темы более обширные, и они требуют отдельных учебных пособий.

+ +
Написание SVG с JavaScript
+ +

БОП

+ +
SVG-фильтры — руководство
+ +

БОП

+ +
Анимация с помощью SMIL в SVG
+ +

БОП

+ +
Создание шрифтов в SVG
+ +

БОП

diff --git a/files/ru/web/svg/tutorial/other_content_in_svg/index.html b/files/ru/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..af90be1201 --- /dev/null +++ b/files/ru/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,39 @@ +--- +title: Другое содержание в SVG +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +

{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

+ +

Помимо графических примитивов, таких как прямоугольники и круги, SVG предлагает набор элементов для встраивания других типов контента в изображения.

+ +

Встраивание растровых изображений

+ +

Так же, как элемент img в HTML SVG имеет элемент изображения, служащий той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация запрашивает приложения для поддержки файлов формата PNG, JPEG и SVG.

+ +

Встроенное изображение становится обычным элементом SVG. Это означает, что вы можете использовать клипы, маски, фильтры, вращения и все другие инструменты SVG для контента:

+ +
<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
+</svg>
+ +

{{ EmbedLiveSample('Встраивание_растровых_изображений','220','220','/files/16567/rotate-image-demo.png') }}

+ +

Внедрение произвольного XML

+ +

Поскольку SVG является XML-приложением, вы можете, конечно, всегда вставлять произвольный XML в любом месте документа SVG. Но тогда у вас нет средств для определения того, как окружающий SVG должен реагировать на содержимое. Собственно, в соответствующем обозревателе он совсем не реагирует, данные просто будут опущены.
+ Поэтому спецификация добавляет элемент {{ SVGElement("foreignObject") }} в SVG. Его единственная цель - быть контейнером для другой разметки и носителем для атрибутов стиля SVG (наиболее заметны ширина и высота для определения пространства, которое будет занимать объект).

+ +

Элемент foreignObject - хороший способ вставки XHTML в SVG. Если у вас есть более длинные тексты, макет HTML более подходит и удобен, чем текстовый элемент SVG. Другим часто упоминаемым примером использования является вложение формул с MathML. Для научных приложений SVG это очень хороший способ вступить в оба мира.

+ +
Note: Please keep in mind, that the content of the foreignObject must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.
+ +

Поскольку foreignObject является элементом SVG, вы можете, как и в случае с изображением, использовать с ним любую добросовестность SVG, которая затем будет применяться к его контенту.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..63d4cf6412 --- /dev/null +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -0,0 +1,234 @@ +--- +title: Пути (paths) +slug: Web/SVG/Tutorial/Paths +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+ +

Элемент <path> ("путь")– наиболее мощный элемент в библиотеке основных форм SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.

+ +

С помощью элементов <path> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент polyline. Хотя результаты работы обоих элементов могут быть похожи, элемент polyline отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.

+ +

Форма элемента path определяется одним атрибутом: {{ SVGAttr("d") }} (смотри подробности в основные формы). Атрибут d содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.

+ +

Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10).  Команда "Передвинуть к" вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда "M 10 10", и далее синтаксический анализатор переходит к следующей команде.

+ +

Все команды существуют в двух вариантах: вызов команды с заглавной буквы обозначает абсолютные координаты на странице, а команда со строчной буквой -относительные (например, перемещение от последней точки на 10px вверх и 7px влево).

+ +

Координаты в атрибуте d всегда пишутся без указания единиц измерения и находятся в системе пользовательских координат (обычно это пиксели). Позже мы рассмотрим, как элемент paths может быть трансформирован для других нужд.

+ +

Команды линии

+ +

Существуют пять команд линии для узлов <path>.  Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <path> для указания точки, откуда начнется рисование, например:

+ +
M x y
+
+ +

или

+ +
m dx dy
+ +

Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <path> она вообще не была бы видна.

+ +

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Точки -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>
+ +

Существуют три команды, которые рисуют линии. Самая общая - команда "Линия к", вызываемая буквой L. Эта команда принимает два параметра - координаты точки x и y - и рисует линию от текущего положения к этой точке.

+ +
 L x y (или l dx dy)
+
+ +

Для рисования горизонтальных и вертикальных линий есть две укороченные формы . H рисует горизонтальную линию, а V рисует вертикальную линию. Обе команды используют только один аргумент, так как они движутся только в одном направлении.

+ +
 H x (или h dx)
+ V y (или v dy)
+
+ +

Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <rect>). Он состоит только из горизонтальных и вертикальных линий:

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Точки -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>
+ +

Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", Z. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.

+ +
 Z (или z)
+
+ +

Таким образом наш путь из примера можно сократить до:

+ +
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата - 80 x 80, элемент <path> можно записать так:

+ +
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.

+ +

Возможно, в этих примерах было бы проще использовать элементы <polygon> или <polyline>. Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов.  Нет никакой разницы в производительности при использовании того или другого.

+ +

Команды кривых линий

+ +

Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

+ +

Кривые Безье

+ +

Кубическая кривая, C, представляет собой немного более сложную кривую. Кубическая Безье принимает две контрольные точки для каждой точки.  Таким образом, чтобы создать кубическую кривую Безье, вам необходимо указать три набора координат.

+ +
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+
+ +

Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+
+ +

Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделенными становятся контрольные точки. Ближе к правому, становятся более отделенными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.

+ +

Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).

+ +
 S x2 y2, x y (or s dx2 dy2, dx dy)
+
+ +

Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка - отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что обе контрольные точки для кривой одинаковы. Пример синтаксиса показан ниже. В фигуре слева контрольные точки показаны красным, а подразумеваемая контрольная точка - синим.

+ +

ShortCut_Cubic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Другой тип кривой Безье - квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.

+ +
 Q x1 y1, x y (or q dx1 dy1, dx dy)
+
+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.

+ +
 T x y (or t dx dy)
+
+ +

Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.

+ +
+

Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.

+
+ +

Shortcut_Quadratic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Обе кривые дают похожие результаты, но кубическая кривая позволяет больше свободы в том, как должна выглядеть кривая. Решение, какую кривую использовать - ситуационное и зависит от количества симметрии в линиях.

+ +

Дуги

+ +

Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут испольовать для соединения точек, так что в любой ситуации возможно 4 дуги.

+ +
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

В начале элемент дуги принимает два аргумента радиусов. Если нужно, обратитесь к разделу Эллипсы, чтобы увидеть, как они работают. Последние два аргумента предназначены для обозначения координат окончания дуги. Вместе эти четыре значения определяют основную структуры дуги.

+ +

Третий параметр описывает поворот дуги. См. пример ниже

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+ +

Пример показывает элемент path, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр x-asix-rotation = 0, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр x-asix-rotation = -45. Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.

+ +

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

+ +

Show the 4 arcs on the Ellipse example

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
+  <path d="M 10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
+  <circle cx="110" cy="215" r="2" fill="red"/>
+  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
+  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
+</svg>
+ +

Заметьте, что каждый голубой эллипс сформирован двумя дугами, в завимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start->end точками.

+ +

Если start->end точки расположены далеко и не попадают в пределы радусов эллипсов по x и y, то в этом случае радуисы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную этой на wolfram alpha. Это вычислиние для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решенимем, (x, y), является центр эллипса(ов). Следющее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет мнимым если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.

+ +

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.

+ +

Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Хром и Файрфокс, может не работать в вашем браузере)

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..1db8bc9448 --- /dev/null +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -0,0 +1,76 @@ +--- +title: Шаблоны +slug: Web/SVG/Tutorial/Patterns +translation_of: Web/SVG/Tutorial/Patterns +--- +

{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}

+ +

Шаблоны (Patterns)

+ +

Patterns, по моему мнению, одни из самых запутанных типов заполнения (fill types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <defs> в Вашем SVG-файле.

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="Gradient1">
+      <stop offset="5%" stop-color="white"/>
+      <stop offset="95%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="5%" stop-color="red"/>
+      <stop offset="95%" stop-color="orange"/>
+    </linearGradient>
+
+    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+    </pattern>
+  </defs>
+
+  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+</svg>
+ +

{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}

+ +

Внутри элемента <pattern> вы можете использовать любые другие основные фигуры, которые использовались ранее.  И каждая из них может быть стилизована, используя любые из возможных вариантов стилизаций, которые Вы изучали до этого, включая градиенты и прозрачность. Выше мы просто нарисовали два прямоугольника внутри нашего шаблона (которые перекрываются, и один из которых в два раза больше другого и используется для заполнения всего шаблона), и один круг.

+ +

Сбивающая с толку вещь - это определение единиц измерения и размера. В примере выше мы определили ширину и высоту соответствующими аттрибутами внутри паттерна, что бы указать как далеко паттерн будет "продолжаться", прежде чем начать повторяться. Также доступны x и y атрибуты для смещения стартовой точки этого прямоугольника в том месте где вы его отрисовываете. Причина по которой они тут использованы, описана ниже.

+ +

Как и с gradientUnits атрибутом, использованном ранее, у паттерна также есть атрибут patternUnits . Он определяет единицы измерения, которые принимают атрибуты. По дефолту используется значене "objectBoundingBox", (как и в предыдущем разделе). Так что значения от 0 до 1 будут масштабированы в зависимости от размеров объекта, к которому вы применяете паттерн. Поскольку в данном случае мы хотим, чтобы шаблон повторялся 4 раза по горизонтали и вертикали, ширину и высоту мы установили в значение 0.25. Что означает 0.25 от размера целевого объекта

+ +

В отличие от градиентов, у паттернов есть 2ой атрибут - patternContentUnits, который описывает единицы измерения, используемые в базовых фигурах внутри элемента pattern. Дефолтное значение для этого атрибута -  userSpaceOnUse, противоположность атрибуту patternUnits. Это означает, что если Вы не укажете один или оба этих атрибута (patternContentUnits и/или patternUnits), фигуры, которые Вы будете рисовать внутри блока <pattern>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.

+ +

Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.
+ Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты x и y шаблона должны были быть скорректированы до 10/200 = 0,05.

+ + + +

Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.
+ Изменяя атрибут patternContentUnits , мы можем поместить все элементы в одну единую систему:

+ +
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
+   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
+   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
+   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменен на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой userSpaceOnUse, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.

+ +

Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).
+ Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.

+ +

Ни одно из этих применений не является тем, о чем обычно думают, когда вы думаете о шаблоне. Шаблоны обычно имеют заданный размер и повторяются независимо от формы объекта. Чтобы создать что-то подобное - шаблон и его содержимое должны быть нарисованы в текущем userSpace, чтобы они не меняли форму, если объект:

+ +
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведенных выше примеров показаны ниже на прямоугольнике, который слегка удлинен до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.

+ +

Image:SVG_Pattern_Comparison_of_Units.png

+ +

{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}

diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..92cdb57f84 --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,98 @@ +--- +title: SVG шрифты +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.
+  

+ +

SVG-шрифты корректно поддерживаются только в Safari.
+ Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25),  разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

+ +

Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.

+ +

Установка шрифта

+ +

 

+ +

Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный в спецификации), и объясним детали.
+  

+ +
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+  <!-- more glyphs -->
+</font>
+
+ +

Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут id, который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. 

+ +

Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это font-family, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

+ +

Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

+ +

Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут d - он определяет форму для глифа точно так же, как работают стандартные пути SVG.

+ +

Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является unicode. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными xml:lang). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.
+
+ Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты u1 и u2) и атрибут k, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.

+ +
<hkern u1="A" u2="V" k="20" />
+
+ +

Ссылка на шрифт

+ +

После того как вы описали шрифт, как показано выше, вы можете просто применить атрибут font-family для использования шрифта в тексте SVG: 

+ +
<font>
+  <font-face font-family="Super Sans" />
+  <!-- and so on -->
+</font>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+
+ +

Тем не менее, вы можете объединить несколько методов для того чтобы определить как и где использовать шрифт.

+ +

Опция: использование CSS @font-face

+ +

Вы можете использовать свойство @font-face для ссылки на внешние шрифты:

+ +
<font id="Super_Sans">
+  <!-- and so on -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

Опция: ссылка на внешний шрифт

+ +

Элемент font-face-uri позволяет ссылаться на внешний шрифт, следовательно, его можно использовать в нескольких местах:

+ +
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git a/files/ru/web/svg/tutorial/svg_image_tag/index.html b/files/ru/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..1791c5b8fb --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,34 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

+ +

SVG тег {{ SVGElement("image") }} позволяет выводить растровые изображения внутри SVG-объектов.

+ +

В примере ниже растровое изображение a.jpg, заданное при помощи атрибута {{ SVGAttr("href") }}, отображено внутри SVG-объекта:

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +
+

Важные замечания (подробнее W3 specs):

+
+ + + +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..fc3ab83319 --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,115 @@ +--- +title: SVG в HTML. Введение +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +

Описание

+ +

Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.

+ +

Код

+ +

Демонстрация примера здесь:

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>XTech SVG Demo</title>
+<style>
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+</style>
+<script>
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+</script>
+</head>
+<body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+<form>
+  <fieldset>
+    <legend>HTML Form</legend>
+    <p><label>Введите что-нибудь:</label>
+    <input type="text"/>
+    <span id="err">Incorrect value!</span></p>
+    <p><input type="button" value="Activate!" onclick="signalError();" /></p>
+  </fieldset>
+</form>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+  <linearGradient id="gradient">
+    <stop class="begin" offset="0%"/>
+    <stop class="end" offset="100%"/>
+  </linearGradient>
+  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+</svg>
+</body>
+</html>
+
+ +

Примечание

+ +

В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

+ +

Такой способ имеет следующие пункты в свою пользу:

+ + + +
+

Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:

+ +
 var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+
+
+ +

Дополнительно

+ +

Значение атрибута  viewBox определяет область в пространстве пользователя, относительно внешним границам просмотра.

+ +

viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:

+ +
viewBox="0 0 100 100"
+ +

Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут preserveAspectRatio. С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow)  области просмотра, края svg могут быть обрезаны или вписаны.

+ +
 preserveAspectRatio="alignment [meet | slice]"
+ +

alignment - одно из значений  xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax.

+ +

meet - сохраняет пропорции, умещая svg в область просмотра

+ +

slice - тоже cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область

+ +

Также есть спецификатор none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).

+ +
 preserveAspectRatio="none"
+ +

Атрибут style применяется для определения стиля элемента.

+ + + + + +

 

diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..29170aae1e --- /dev/null +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Текст +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+ +

 

+ +

Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.

+ +

Основы

+ +

В getting started мы уже видели, что элемент text может использоваться для размещения произвольного текста в SVG документах:

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

Атрибуты x и y задают расположение текста на экране. Атрибут text-anchor, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки. 
+
+ Как и для фигур, тексту можно задать цвет с помощью атрибута fill и обводку, используя атрибут stroke. Оба могут быть использованы с gradient и pattern элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.

+ +

Настройка свойств шрифта

+ +

Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт.  Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing и text-decoration.

+ +

Другие текстовые элементы

+ +

tspan

+ +

Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в text элемент или в другой tspan элемент. Примером является выделение одного слова в предложении красным цветом. 

+ +
<text>
+  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
+</text>
+
+ +

Элемент tspan имеет следующие атрибуты:
+
+ x
+ Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по-умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу tspan.

+ +

dx
+ Задает смещение по горизонтали dx относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.

+ +

Аналогично, для вертикального перемещения текста имеются y и dy атрибуты.
+
+ rotate
+ Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.
+
+ textLength
+ Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.

+ +

tref

+ +

Элемент tref позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут xlink:href чтобы указать на  элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. 

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

Этот атрибут извлекает path, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.

+ +
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
+<text>
+  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
+</text>
+ +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..97a63678a3 --- /dev/null +++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,72 @@ +--- +title: Tools for SVG +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

Теперь, когда мы рассмотрели основы SVG, мы рассмотрим некоторые инструменты для работы с SVG файлами.

+ +

Browser support

+ +

As of Internet Explorer 9, all major browsers support SVG: IE 9, Mozilla Firefox, Safari, Google Chrome and Opera. Mobile devices with Webkit-based browsers also support SVG. On older or smaller devices, chances are that SVG Tiny is supported.

+ +

Inkscape

+ +

URL: www.inkscape.org

+ +

Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.

+ +

Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.

+ +

Adobe Illustrator

+ +

URL: www.adobe.com/products/illustrator/

+ +

Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.

+ +

Apache Batik

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.

+ +

Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.

+ +

Together with Apache FOP Batik can transform SVG to PDF.

+ +

Other renderers

+ +

Several projects exist that can create a raster image from an SVG source. ImageMagick is one of the most famous command-line image processing tools. The Gnome library rsvg is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.

+ +

Raphael JS

+ +

URL: raphaeljs.com

+ +

This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.

+ +

Snap.svg

+ +

URL: snapsvg.io

+ +

A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.

+ +
 
+ +

Google Docs

+ +

URL: www.google.com/google-d-s/drawings/

+ +

Drawings from Google Docs can be exported as SVG.

+ +

Science

+ +

The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web JSXGraph supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.

+ +

In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See carto.net for details.

+ +

More tools!

+ +

The W3C offers a list of programs that support SVG.

+ +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git "a/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" "b/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" new file mode 100644 index 0000000000..6aa2b20b16 --- /dev/null +++ "b/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" @@ -0,0 +1,98 @@ +--- +title: Базовые трансформации +slug: Web/SVG/Tutorial/Базовые_Преобразования +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
+ +

Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете  назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:

+ +
+
<svg width="30" height="10">
+    <g fill="red">
+        <rect x="0" y="0" width="10" height="10" />
+        <rect x="20" y="0" width="10" height="10" />
+    </g>
+</svg>
+
+
+ +

{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Все последующие преобразования суммируются в атрибуте преобразования элемента transform . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

+ +

Перемещения

+ +

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется translate().

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+</svg>
+
+ +

Пример генерирует прямоугольник, перемещенный в точку  (30,40) вместо точки (0,0).

+ +

{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

если второе значение не задано, то оно приравнивается 0.

+ +

Вращение

+ +

Вращение элементов - это достаточно типичная задача. Используйте  rotate() для этого:

+ +
<svg width="31" height="31">
+    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
+</svg>
+
+ +

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задается в градусах.

+ +

{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Смещение углов

+ +

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажен.

+ +

Масштабирование

+ +

scale() изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y.  Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, 0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.

+ +

Комплексные перемещения с matrix()

+ +

Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

+ +

См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

+ +

Эффекты на системе координат

+ +

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

+ +
<svg width="100" height="100">
+    <g transform="scale(2)">
+        <rect width="50" height="50" />
+    </g>
+</svg>
+
+ +

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse.

+ +

{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Встраивание SVG в SVG

+ +

В отличие от HTML, SVG позволяет встравивать другие svg элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя viewBox, width иheight внутреннего svg элемнта.

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличениея изображения в два раза.

+ +

{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git "a/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" "b/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" new file mode 100644 index 0000000000..0ecb1c5f1c --- /dev/null +++ "b/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" @@ -0,0 +1,44 @@ +--- +title: Введение +slug: Web/SVG/Tutorial/Введение +tags: + - SVG + - Руководство +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}

+ +

SVG это язык XML разметки, схожий с XHTML, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.

+ +

В 1999 году, после конкурса нескольких форматов, SVG был включен в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

+ +

Базовые компоненты

+ +

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.

+ +

Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.

+ +

До начала работы

+ +

Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

+ +

SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

+ +

Перед тем как начать,  вы должны иметь основное понимание XML или другого языка разметки, такого как HTML. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:

+ + + +

SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать Справочник SVG элементов и SVG интерфейсы,  чтобы найти что-либо еще при необходимости.

+ +

Особенности SVG

+ +

Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

+ +

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

+ +

Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

+ +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

diff --git "a/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" "b/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" new file mode 100644 index 0000000000..e95fd31f68 --- /dev/null +++ "b/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" @@ -0,0 +1,144 @@ +--- +title: Основные Фигуры +slug: Web/SVG/Tutorial/Основные_Фигуры +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

+ +

Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.

+ +

Основные формы

+ +

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
Замечание: Атрибуты stroke, stroke-width и fill описываются в рукодстве далее.
+ +

Прямоугольники

+ +

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
Положение x верхнего левого угла прямоугольника.
+
y
+
Положение y верхнего левого угла прямоугольника.
+
width
+
Ширина прямоугольника
+
height
+
Высота прямоугольника
+
rx
+
Радиус x углов прямоугольника
+
ry
+
Радиус y углов прямоугольника
+
+ +

Окружность

+ +

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
Радиус окружности.
+
cx
+
Положение x центра окружности.
+
cy
+
Положение y центра окружности.
+
+ +

Эллипс

+ +

Ellipse - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
Радиус x эллипса.
+
ry
+
Радиус y эллипса.
+
cx
+
Положение x центра эллипса.
+
cy
+
Положение y центра эллипса.
+
+ +

Линия

+ +

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
Положение x точки 1.
+
y1
+
Положение y точки 1.
+
x2
+
Положение x точки 2.
+
y2
+
Положение y точки 2.
+
+ +

Ломаная линия

+ +

Элемент polyline воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".
+
+ +

Многоугольник

+ +

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <rect/> в случаях, когда необходимо большая гибкость.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).
+
+ +

Путь

+ +

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.
+
+ +
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git "a/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" "b/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" new file mode 100644 index 0000000000..7a660c2d0f --- /dev/null +++ "b/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" @@ -0,0 +1,48 @@ +--- +title: Расположение (позиции) +slug: Web/SVG/Tutorial/Позиции +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

Сетка

+ +

SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.

+ +

Пример:

+ +

Элемент

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.

+ +

Что такое "пиксели"?

+ +

В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.

+ +

Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента svg:

+ +
<svg width="100" height="100">
+
+ +

Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут viewBox определяет часть этого полотна, которая будет отображаться. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.

+ +

Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется системой пользовательских координат. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.

+ +

Цитата из SVG 1.1 специфирования иллюстрирует это:

+ +
+

[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

-- cgit v1.2.3-54-g00ecf