Знакомство с SVG-графикой

  • Tutorial
Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Демонстрация всех примеров / Скачать исходники / Официальная документация

Преимущества SVG


  • Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
  • Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
  • Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
  • Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
  • Малый размер: объекты SVG весят намного меньше растровых изображений.


Основные SVG-фигуры


Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg.

Простая линия с помощью тега line с всего двумя параметрами — точками начала (x1 и x2) и конца (y1 и y2):

<svg>  
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>  
</svg>  


Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:

style="stroke-width:1; stroke:rgb(0,0,0);" 




Демо

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


Синтаксис аналогичен предыдущему, используется тег polyline, атрибут points задает точки:

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

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


Вызывается тегом rect, можно добавить некоторые атрибуты:

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Окружность


Вызывается тегом circle, в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Эллипс


Вызывается тегом ellipse, работает аналогично circle, но можно задать два радиуса — rx и ry:

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

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


Вызывается тегом polygon, многоугольник может иметь разное количество сторон:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Использование редакторов


Как видно из примеров, рисование базовых SVG-фигур — это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:

<object data="images/ipod.svg" type="image/svg+xml"></object> 


Пример — изображение айпода с сайта OpenClipArt.org:



Поддержка браузерами


SVG поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже. Но и это может быть исправлено использованием javascript-библиотеки Raphael.js. Конвертировать  SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.com.



Для начала необходимо подключить библиотеку Raphael.js на нужную страницу, затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function:

window.onload=function() { 
	//сюда вставить код Raphael
}


На странице вставить div с атрибутом rsr:

<div id="rsr"></div>


Демо

Заключение


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

Немного полезного чтива:
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 97
  • +5
    SVG ещё можно анимировать при помощи SMIL
    • +1
      SVG ещё можно анимировать нативно.

      * сорри, вспомнил что тег animate и есть SMIL))).
    • –6
      Ещё бы неплохо написать хотя бы пару слов про поддержку браузерами
      caniuse.com/#search=svg
      • 0
        Это написано в предпоследнем разделе.
        • 0
          Ага, под Андроид 2.1…
        • 0
          Не “Raphael”, а “Raphaël”.
          А вот это нее понял: “затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function” — какой код? Код SVG-файла? Код Raphaёl.js?
          • +1
            Случаем не подскажите, как Raphaël произносится? Как Рафаёл? Рафаэль?
            • 0
              Не могу сказать точно, но подозреваю, что англоязычная “e” с умляутом звучит схоже с норвежской “ö”, которая читается как нечто среднее между русскими “о” и “ё”.
              Короче, [рафай'ол'].
              • +2
                В английском нет ë.

                А, например, во французском — есть: там ë читается как обычная e, независимо от предшествующей буквы. То есть, например, в словах Noël, Moët произношение сочетания oë можно приблизительно передать русскими буквами оэ. Возьмите для сравнения словосочетание chef d'oeuvre — вторая его часть произносится (приблизительно) как дёвр.

                С Рафаэлем — та же фигня. Без точек был бы Рафэль. Во французской википедии есть даже статья об этом имени, там оно пишется аналогично:
                Raphaël est un prénom masculin.
                • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  В английском и французском букв с двумя точками, строго говоря, нет. Но иногда две точки над второй гласной применяются. Они служат, чтобы «разбить» диграф и заставить каждую букву читаться по своим собственным правилам.

                  Предположим, по правилам буква «o» читается как звук «о», буква «e» читается как звук «э», а сочетание «oe» читается как русская «ё». Тогда «oë» будет предписывать чтение не как «ё», а по отдельности: «оэ». Что и продемонстрировал коллега shoorick в примерах про Noël и Moët.
                  • 0
                    Боже, зачем Вы изощряетесь, когда на сайте продукта во втором же абзаце указано произношение: ['ræfeɪəl]? По правилам англо-русской практической транскрипции по-русски это пишется так: «Рэ́фейэл».
                    • 0
                      Действительно, всё так. Простите, был невнимателен.
                  • +5
                    Сам Барановский произносит как «Рафаэль».
                    • +2
                      Raphaël назван в честь известного художника ренесанса и произносится Рафаэль. Диарезиз в название добавлен для англоязычных читателей, чтобы они не читали “ae” как один звук.

                      Вообще не стоит заморачиваться, как произносит большинство, так и правильно. Мало кто поймёт у нас что «найки» и «эдоби» это на самом деле Nike и Adobe. ;)
                    • +1
                      • 0
                        Мнемонически, для запоминания: «RA(dmin) Fail» ;-)
                        • 0
                          Здесь все-таки feɪəl, а не feɪl, так что плохая мнемоника.
                  • +2
                    А как в SVG нарисовать кривую Безье?
                    • +2
                      При помощи тега path. Надеюсь, что автор расскажет об этом в следующих сериях.
                    • 0
                      Хороший формат. До появления Рафаэль нужно было использовать адобовский плагин, который позволял работать чуть ли на в 5-м IE…
                      • +6
                        Вы пробовали делать сложные анимации с использованием svg?
                        Даже несложная svg анимация, ощутимо грузит firefox. Причем как CSS Transition/Animate, так и с помощью SMIL или javascript.
                        Глюки при работе с сложными svg в opera. Проблема рендеринга. Встречается при определенных обстоятельствах, но подпортит нервы неплохо.
                        Проблемы с фильтрами. Плохо работает гауссово размытие в chromium ниже 20-ой версии. В firefox неплохо, за исключением ужасной прожорливости и опять же отсутствие поддержки некоторых параметров в фильтрах.

                        Это все с анимациями связанными с svg.

                        Со SMIL все не так радужно (не везде работают правильно правила связанные с begin="(#).end + (n) s").

                        Причем вопросы с chromium и opera легко решаемы(за исключениями), а вот проблемы с firefox — это ужасная беда. Причем в багтрекере Фокса часто ссылаются на svg team, типа они виноваты.

                        Сам по себе SVG отличный формат. И для работы с простыми композициями пойдет. Но для создания и работы со сложной композицией, с анимациями, текущие реализации SVG — проблемны(причем особенно в Firefox).
                        • 0
                          Да все в порядке с анимацией в SVG. Вот не очень простая анимация на Halloween нигде вроде особенно не тормозит.
                          • 0
                            Только что проверил.

                            Разница работы:
                            Chromium. Полет нормальный.
                            Firefox:
                            1)В конце домик не загорается.
                            2)Не хило грузит, даже после проигрывания анимации.
                            3)Анимация не имеет много мелких и сложных элементов.
                            4)Нет сложных трансформаций, в том числе групп.

                            Оперу еще не смотрел.

                            Всё проверено сейчас на Ubuntu и Vista.

                            Да кстати, в анимации нигде нет фильтров
                            • 0
                              Ок, на этот раз вы победили.
                              Но я еще сделаю сложную анимацию с трансформациями и множеством элементов.
                              Про фильтры обещать не буду, т.к. они даже в графических редакторах оказываются тяжелой операцией.
                              • 0
                                Тем не менее, фильтры на шейдерах могут реактивно работать!
                            • 0
                              Это как раз простая, нет трансформаций и масштабирования объектов!
                              • 0
                                т.е. animateTransform это не анимация транформаций?
                                • 0
                                  Ну попробуйте что нибудь сложнее двигания пикселей и альфа канала. Блин с этой задачей вполне должен первый пенёк справляться. Ну с учетом разрешения ладно уж второй.
                              • 0
                                ФФ 16.0, вин хп: лагает ощутимо.
                                • 0
                                  У меня на Win7 на FullHD с аппаратным ускорением быстрее чем в Опере и Хроме, в которых около 15–20 фпс. Без него примерно так же.
                            • +1
                              Кстати, про скриптинг SVG с помощью js я уже писал статейку. За год ещё не должна была устареть :-)
                              • 0
                                А как она мне помогла в своё время ;)
                              • 0
                                Мне вот очень понравилась фишка прямого включения SVG-кода в HTML-страницу, внутри элемента SVG. Примерно так:

                                <!DOCTYPE html>
                                <html xmlns="http://www.w3.org/1999/html">
                                <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
                                <body>
                                Над картинкой<br>
                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="560px" height="540px">
                                    <g transform="scale(0.5)">
                                    <svg x="574" y="526" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round">
                                    <a xlink:href="somewhere-else">
                                    <path d="M 15,45 l 0,52 a 228,228 0 0,0 114,-55 l -37,-40 a 176,176 0 0,1 -77,43 z"></path>
                                    </a>
                                    <path d="M 15,120 l 0,116 a 360,360 0 0,0 211,-96 l -78,-79 a 251,251 0 0,1 -133,59 z"></path>
                                    <path d="M 78,269 l 53,218 a 629,629 0 0,0 109,-36 l -7,-13 a 611,611 0 0,0 154,-103 l -145,-146 a 408,408 0 0,1 -164,80 z"></path>
                                    <path d="M 319,242 l 41,43 l 25,-26 l -39,-39 z"></path>
                                    </svg>
                                </svg><br>
                                Под картинкой
                                </body></html>
                                
                                

                                И после этого хоть что с элементами делай — они включены в DOM tree, можно их дёргать jQuery и тому подобное. И гиперссылки можно навешивать на элементы.
                              • +2
                                Если уж взялись разъяснять основы, то ссылка на спецификацию была бы не лишней.

                                Вставлять на страницу SVG можно с помощью embed, iframe и object


                                Не только; ещё через собственно svg (инлайново), img, background-image, favicon и font-face.

                                SVG поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже.


                                Internet Explorer 8 и ниже вполне себе поддерживают SVG через сторонние плагины, например эдоубиевский.
                                • 0
                                  Через плагин, которого ни у кого нет, а также разработка и поддержка которого давно прекращена.
                                  • 0
                                    Во-первых, эдоубиевский плагин — не единственный, хотя не знаю, какова судьба остальных. Во-вторых, зачем ему разработка и поддержка, если он нужен только для старых IE? В-третьих, тот, кто до сих пор имеет старый IE, весьма вероятно имеет и плагины, которые там требовались. В-четвёртых, если вдруг не имеет, можно выдать предложение поставить, о чём я писал два года назад, но по нынешним временам, вероятно, лучше предложить обновить браузер.
                                    • 0
                                      Предложение поставить не выдаст, на запрос возвращается ошибка. А вот сам запрос заметно тормозит загрузку. Кстати, это справедливо только для <object>, который сам по себе далеко не всегда подходит.

                                      Такие плагинов практически ни у кого нет, если есть другие сведение, будьте добры, приложите статистику. У большинства стоит только флеш, на втором месте Adobe Reader, и на это, пожалуй, список заканчивается, кроме, быть может, всякой адвари вроде навязываемых тулбаров.
                                • 0
                                  Хочу поговорить про векторную графику в интернете.

                                  Apple перевела все свои устройства на дисплеи высокого разрешения. Есть разные мнения на тему «зачем оно мне надо», но суть не в этом. Что бы мы об этом ни думали, через пару лет все производители сделают то же самое, поскольку технология существует и маркетологи не упустят шанс навариться на ней.

                                  Множество крупных сайтов уже сейчас в какой-то мере поддерживают экраны с высокой плотностью точек, но они делают это довольно тупо: для каждого элемента с изображением готовят два файла — обычного разрешения и удвоенного (иногда достаточно кратности 1.5). Сейчас не учитывается один важный момент: при высокой плотности точек можно интерполировать все подряд и это будет выглядеть хорошо. То есть, вам не нужно делать картинки 100%, можно выбрать любой удобный размер, который всех устроит. А пользователь будет активнее пользоваться масштабированием в браузере. Причем, масштабирование будет плавным (как в Safari), а не ступеньками (как в Chrome). Не будет такого, что сайт сверстан под 1024 или какое-то другое разрешение.

                                  И для обеспечения работы таких сайтов очень пригодится векторная графика. Конечно, основная масса контента останется растровой, но в оформлении и в инфографике удобно будет использовать вектор.
                                  • 0
                                    Всё бы хорошо, но старые браузеры не поддерживают SVG. Всё равно нужно два файла: старый добрый PNG и SVG.
                                    • 0
                                      Старые браузеры и с PNG имеют некоторые проблемы. Тогда уж GIF.
                                      • 0
                                        Этим проблемам gif не поможет.
                                        • 0
                                          Я имел в виду прозрачность фона png в IE6.
                                          • 0
                                            Прекрасно себе прозрачен в 8-битном png не хуже чем в gif.
                                            • 0
                                              …в альфа-канале, разумеется.
                                              • 0
                                                У гифа его нет, как я сказал, он ничем не поможет.
                                      • 0
                                        Старые браузеры бывают только у Microsoft, это раз.
                                        Через два-три года не будет даже IE8, это два. IE9 уже обогнал IE8 в рунете.
                                        • 0
                                          Firefox 3.6, Android 2 у Майкрософт?
                                          • 0
                                            А что Firefox 3.6? Мы под него разработку ведём, и используем при этом SVG.
                                            • 0
                                              Не поддерживает SVG в img и фоне, не говоря уж о прямо в HTML. Только object, только хардкор.
                                              • +1
                                                Неправда: в img и фоне не поддерживает, а инлайново — вполне себе, только XHTML, разумеется, должен быть.
                                                • +1
                                                  Вы где-нибудь видели на живом реальный XHTML? Который падает от любого не экранированного амперсанда.
                                                  • 0
                                                    Не только видел, мы только его и пишем уже лет пять. Амперсанды экранируем, да, не вижу проблемы.
                                                    • +1
                                                      Это, наверное, «неживой»...;-) В смысле, генерированный…
                                                      • 0
                                                        Так он и должен быть весь генерированный, какой же ещё?
                                                        • 0
                                                          Можно и руками писать. Как, в прочем, и postscript… Хардкор такой хардкор…
                                    • 0
                                      Для меня как для инженера минусом является то что нет возможности сохранить в какой нибудь чертежный формат. Пусть хотябы в открытый DXF. Это уже открыло бы большие перспективы для разработчиков. И тогда наконец для нас, инженеров, появились бы адекватные сервисы контроля версий, подобные GIT, SVN и т.д. для программистов.
                                      Хотя… может быть есть такая надстройка? Никому не попадалась?
                                      • 0
                                        Зачем? Ведь существует некий Adobe SVG.
                                        Т.е. в принципе как-то извратиться и хранить версии можно. Однако подозреваю в сравнении разных ревизий в текстовом виде будет мало смысла…
                                        • 0
                                          Открыл сейчас Inkscape. Увидел в нем как вариант сохранения .«Desktop Cutting Plotter (AutoCAD DXF R14) (*.dxf)'.
                                          • 0
                                            Хм, инженер чертящий в инкскейпе это нонсенс… Тут даже без смайла. Но в общем хорошо, да.
                                            • +1
                                              Вещь интересная, но не совсем то что нужно. Спасибо. Только это больше для художников, дизайнеров, а не для инженеров.
                                            • 0
                                              Поищите в Гугле по запросу «dwf compare». Думаю то что вам надо, правда не SVG. Сравнение чертежей в DWF формате.
                                            • 0
                                              А вот еще хороший пример.

                                              Я вот до сих пор не могу понять, можно ли в SVG вывести отформатированный текст? Т.е. задаются граница текста (например прямоугольник) и опции: выравнивание по вертикали и горизонтали.
                                              • 0
                                                Можно. Можно даже по кривой отображать текст.
                                                Примеры не буду писать, наглядно можно увидеть это в InkScape.
                                                • 0
                                                  По кривой как раз сейчас не интересует. Интересует именно форматированный вывод. Если можно, поделитесь, пожалуйста, примером.
                                                  • 0
                                                    По спецификации W3C
                                                    Но это SVG версии 1.2 который конечно же полностью не поддерживается браузерами.

                                                    Поэтому пока только размещение текста по кривой(которая может быть прямой, внутри прямоугольника), с изменением параметра у тега textPath startOffset="(значение)"

                                                    Так что в SVG можно, но браузер это проигнорирует.
                                                    • +1
                                                      Все предельно просто:
                                                      <foreignObject>
                                                        <div xmlns="http://www.w3.org/1999/xhtml">
                                                          <p>My <strong>text</strong></p>
                                                        </div>
                                                      </foreignObject>
                                                      
                                                      • 0
                                                        Боюсь там не все красиво как кажется
                                                        баги webkit
                                                        • 0
                                                          Ну, форматированный текст ведь можно вывести?
                                                          А баги есть в любом сложном продукте.
                                                • 0
                                                  Малый размер: объекты SVG весят намного меньше растровых изображений.

                                                  неправда ваша. бывает и наоборот. особенно на 24" можно запросто достичь :)
                                                  • +2
                                                    поясните, пожалуйста, как размер экрана влияет на объём svg-кода?
                                                    • +2
                                                      Ну если внутрь SVG присобачивать растр, как этим грешит Corel, то конечно объем раздуется =)
                                                      • –3
                                                        Рассмотрим 1920х1080 например. Растр такого разрешения займет 49766400 самых глубоких бит. Однако сохраненный в PNG файл окажется всего-лишь 165Кб. SVG такого размера представить, да и сгенерить (исключительно вектор, заметьте), совсем не сложно. Инфа 100%. Существует правда SVGZ, однако не принципиально.
                                                        Что касаемо диагонали отображающего устройства, то не станем же мы пихать в 4" андроида какого-нибудь то же самое, что хорошо разместится на 24". да?
                                                        • +1
                                                          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"><path d="M 78,269 l 53,218 a 629,629 0 0,0 109,-36 l -7,-13 a 611,611 0 0,0 154,-103 l -145,-146 a 408,408 0 0,1 -164,80 z" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round"></path></svg>
                                                          


                                                          Этот SVG займёт ровно 307 байт как для андроида с экраном 4", так и для устройства с экраном 24".

                                                          Ещё раз, поясните мне, как вообще тут что-то может зависеть от размера экрана?
                                                          • –2
                                                            Вы правы, никак не зависит. Это вопрос религии. Лично я спорил с высказыванием ТС, но привел, похоже, слишком личный опыт. Он не интерполируется на весь окружающий мир, извините. У меня в проекте именно так.
                                                          • +1
                                                            Если есть огромное количество объектов в SVG, то спору нет — он может оказаться в разы больше.
                                                            PNG как таковой сжатый формат(который сжимается по определенным алгоритмам), поэтому все таки нормально сравнивать именно с SVGZ.

                                                            PNG тоже не любое изображение может оптимально сжать. Особенно когда значение RGBA практически каждого пикселя уникально.

                                                            Но тут для проекта надо подбирать, где SVG, где PNG, где JPEG, а где и старый GIF подойдет.

                                                            А вот насчет разрешения… Вон тут недавно был топик про retina, Торвальдса и пр.. Так что черт знает, что там с разрешениями сейчас. Слишком большой разброс поддерживаемых разрешений теперь.
                                                    • 0
                                                      Возможно кому-то окажется полезным — библиотека Ample SDK [в числе прочего] рисует SVG как он есть, без промежуточных форматов, а также предоставляет DOM, SMIL и т.д. в IE9.0- пример
                                                      • 0
                                                        Очень понравилась статья, все по делу
                                                        • –1
                                                          Каким образом Raphael.js осуществляет поддержку IE?
                                                          • +1
                                                            Статью пока не прочитал.

                                                            Осуществил год назад часов за 8-12 на этой хрени свою мечту — измерение пути по скриншоту карты. На Оперу под Андроид 2.1 перенеслось криво (вообще и на виндах работает по-разному в FF и хроме). Когда поменял планшет на таковой с ёмкостным экраном, вообще понял в какую лужу сел — в моём поделии почти всё было завязано на дабл-клик, на резистивном было хоть как-то реально со стилусом…

                                                            В общем, технология гиморная, но перспективная.
                                                            • 0
                                                              Хренасе «перспективная»!1 Вот если б я 2(!) года назад не настоял на выборе svg, то сейчас имел бы гемор полной попой )

                                                              Sorry, это ответ на предыдущий пост Flammar
                                                              • 0
                                                                Кому хренасе, а некоторые на трёх браузерах проверяли код, который в экран не влазит и размеры меняет — как он на скроллинг реагирует. Не, согласен, что претензия на GIU на чистом SVG — это несколько изврат. Но всё же.

                                                                Да, а ещё я на нём объект XMLHTTPRequest обнаружил…
                                                                • 0
                                                                  Так что, раз на разных браузерах по-разному, пока только «перспективная»…
                                                                • –2
                                                                  недавно только писали про «оранжевый цвет» habrahabr.ru/post/156451/ и тут бабах! такое лого… или такой?
                                                                  • –5
                                                                    window.onload=function() {
                                                                    //сюда вставить код Raphael
                                                                    }

                                                                    Боже, мои глаза.
                                                                    • 0
                                                                      Ещё стоит добавить, что polygon от polyline отличается тем, что polygon автоматически закрывает фигуру, а polyline — нет.

                                                                      Кстати библиотека Fabric.js умеет интерпретировать SVG и переносить на canvas.

                                                                      Да, и ещё на интуите ( intuit.ru ) есть тоже про SVG, причём очень много.
                                                                      • 0
                                                                        Не понял кстати, зачем разделять синтаксис line и polyline — по сути ведь это одно и то же.

                                                                        И еще непонятно, почему у прямоугольника правый и нижний бока жирные.

                                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.