Что такое SVG? Основы.
Поздравляю всех с Днём Победы! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать.
SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:
- При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
- Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
- Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
- Можно редактировать или анимировать с помощью CSS и JavaScript
- Меньший размер
Итак, зачем он нужен и почему лучше обычного изображения, думаю, вы уже поняли, а теперь перейдём к тому, как его использовать.
Для начала стоит отметить, что все наши фигуры должны быть в теге svg, а теперь давайте нарисуем линию. Для отображения линии служит тег line, который имеет следующие атрибуты:
- x1 - Начальная x координата
- x2 - Конечная x координата
- y1 - Начальная y координата
- y2 - Конечная y координата
- stroke-width - Ширина линии
- stroke - Цвет линии
<svg>
<line x1="10" y1="10" x2="170" y2="170" stroke-width="1" stroke="#0f0">
</svg>
Но что, если нам нужно нарисовать сразу несколько линий? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline.
<svg>
<polyline points="10,10 50,10 100,100 10, 100 10, 10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgba(100,170,10,.3)">
</svg>
У тега polyline есть атрибут points, где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill, в котором мы можем указать цвет в любом из форматов css, которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none.
Перейдём к более сложным фигурам и нарисуем прямоугольник.
<svg>
<rect width="300" height="100" fill="green" stroke-width="1" stroke="#000">
</svg>
Для того, чтобы нарисовать прямоугольник, нужно использовать тег rect, где в атрибутах width и height указать ширину и высоту соотвественно, а остальные атрибуты вам уже знакомы и выполняют абсолютно те же функции, что и с линиями.
Переходим дальше и попробуем нарисовать круг
<svg>
<circle cx="100" cy="75" r="70" fill="rgba(10,70,10, .7)">
</svg>
Для отрисовки круга служит тег circle и атрибуты cx, cy и r для задания координат центра круга и его радиуса.
Другой элемент - эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y. Для его отрисовки служит тег ellipse
<svg>
<ellipse cx="100" cy="75" rx="50" ry="30" fill="rgba(10,70,10, .7)">
</svg>
Если вам нужно выводить многогранные фигуры, такие как пятиугольник, то воспользуйтесь тегом polygon
<svg>
<polygon points="50,50 100,100 150,100 100,50 150," fill="#ccc" stroke-width="1" stroke="rgb(0,0,0)">
</svg>
Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline.
Если объект очень сложный, то вы можете воспользоваться любым редактором векторной графики и нарисовать его там, а затем просто вставить вот таким образом
<object data="myimage.svg" type="image/svg+xml"></object>
SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5, Google Chrome с 3.0 и оперой с 8.0.
На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!
-
- Михаил Русаков
Комментарии (5):
...интересно но не совсем понятно ...
Ответить
Что именно Вам непонятно? Вы можете задать вопрос, относящийся к этой статье, здесь.
Ответить
странно. я делаю табличную страницу. рисую линию над текстом в столбце. в итоге ПОД линией образуется огромное лишнее пространство сантиметра в четыре????
Ответить
Если Вы хотите, чтобы Вам помогли, то залейте код на http://jsfiddle.net/
Ответить
Михаил,вопрос не по теме. Как в notepad ++ вставить код после определённого кода Например: есть код xxx и он повторяется сразу в нескольких местах Допустим мне нужно после каждого кода xxx вставить код ууу.Понимаю,что вручную можно проставить.Но можно ли не вручную?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.