diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/svg/tutorial/introduction | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/web/svg/tutorial/introduction')
-rw-r--r-- | files/ru/web/svg/tutorial/introduction/index.html | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..0ecb1c5f1c --- /dev/null +++ b/files/ru/web/svg/tutorial/introduction/index.html @@ -0,0 +1,44 @@ +--- +title: Введение +slug: Web/SVG/Tutorial/Введение +tags: + - SVG + - Руководство +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> + +<p>В 1999 году, после конкурса нескольких форматов, SVG был включен в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> + +<h3 id="Базовые_компоненты">Базовые компоненты</h3> + +<p>В <a href="/en-US/docs/Web/HTML">HTML</a> имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка. Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.</p> + +<p>Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.</p> + +<h3 id="Before_you_start" name="Before_you_start">До начала работы</h3> + +<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> + +<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> + +<p>Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как <abbr title="HyperText Markup Language">HTML</abbr>. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:</p> + +<ul> + <li>Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).</li> + <li>Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.</li> +</ul> + +<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо еще при необходимости.</p> + +<h3 id="Особенности_SVG">Особенности SVG</h3> + +<p>Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. <a href="http://www.w3.org/TR/SVG/">Второй выпуск SVG 1.1</a> стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.</p> + +<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> + +<p>Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> |