Начало работы
=============

* « Предыдущая статья
* Следующая статья »
### Простой пример

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


```xml
<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: нажмите сюда):

![Посреди красного фона в центре расположен зелёный круг. Белый текст внутри круга — это SVG.](/ru/docs/Web/SVG/Tutorial/Getting_Started/svgdemo1.png)

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

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

* Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, *которые отрендерились позднее*, отображаются *поверх* предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.
* Файлы SVG в вебе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
    + Если HTML является XHTML и выводится как тип приложение`/xhtml+xml`, SVG может быть прямо внедрён в источник XML.
    + Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией
    + На файл SVG можно ссылаться с помощью элемента `object`:
     
    ```
            <object data="image.svg" type="image/svg+xml" />
    
    ```
    + Аналогично может быть использован элемент `iframe`:
     
    ```
            <iframe src="image.svg"></iframe>
    
    ```
    + Элемент `img` тоже может быть использован теоретически. Однако эта техника не работает в Firefox до версии 4.0.
    + Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.Смотри эту статью для более глубокого знакомства с темой.
* Как 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 будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.

* « Предыдущая статья
* Следующая статья »