path: root/files/ru/web/svg/tutorial/getting_started/index.html

---
title: Начало работы
slug: Web/SVG/Tutorial/Getting_Started
tags:
  - SVG
  - 'SVG:Руководство'
translation_of: Web/SVG/Tutorial/Getting_Started
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>

<h3 id="A_Simple_Example" name="A_Simple_Example">Простой пример</h3>

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

<pre class="brush: xml">&lt;svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect width="100%" height="100%" fill="red" /&gt;

  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;

  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;

&lt;/svg&gt;
</pre>

<p>Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">сюда</a>):</p>

<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>

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

<ol>
 <li>Мы начинаем с корневого элемента <code>svg</code>:

  <ul>
   <li>как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает</li>
   <li>до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты <code>version</code> и <code>baseProfile</code>. Но в SVG 2 оба эти атрибута <code>version</code> и <code>baseProfile</code> обрели статус не рекомендованных</li>
   <li>как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li>
  </ul>
 </li>
 <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code>&lt;rect/&gt;</code></a>, который покрывает всю область изображения</li>
 <li>Зелёный круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code>&lt;circle/&gt;</code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).</li>
 <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li>
</ol>

<h3 id="Основные_свойства_файлов_SVG">Основные свойства файлов SVG</h3>

<ul>
 <li>Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, <em>которые отрендерились позднее</em>, отображаются <em>поверх </em>предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.</li>
 <li>Файлы SVG в вебе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
  <ul>
   <li>Если HTML является XHTML и выводится как тип приложение<code>/xhtml+xml</code>, SVG может быть прямо внедрён в источник XML.</li>
   <li>Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией</li>
   <li>На файл SVG можно ссылаться с помощью элемента <code>object</code>:
    <pre>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
   </li>
   <li>Аналогично может быть использован элемент <code>iframe</code>:
    <pre>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
   </li>
   <li>Элемент <code>img</code> тоже может быть использован теоретически. Однако эта техника не работает в Firefox до версии 4.0.</li>
   <li>Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.</li>
  </ul>
  Смотри <a href="/en-US/docs/SVG_In_HTML_Introduction" title="svg in html introduction">эту статью</a> для более глубокого знакомства с темой.</li>
 <li>Как SVG управляет размерами и единицами будет объяснено <a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">на следующей странице</a>.</li>
</ul>

<h3 id="SVG_File_Types" name="SVG_File_Types">Типы SVG файлов</h3>

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

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

<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">Слово о Веб-серверах</h3>

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

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

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

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

<p>Вы можете проверить, правильные ли заголовки HTTP  посылает ваш сервер с файлами SVG, используя <a href="/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a> или сайт, такой как <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a> на странице SVG wiki о ряде простых решений.</p>

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

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