- Очарование форматом картинок в режиме SVG векторной графики
- Элементы в SVG-документе и SVG-анимация
- Удобный SVG-encoder для работы с SVG-документом.
Очарование форматом картинок в режиме SVG векторной графики.
По поводу формата картинок в режиме SVG векторной графики лично у меня сплошное очарование. Это не JPG и даже не PNG, которые имеют либо большие размеры файла (как по весу, так и по его физическим параметрам). И, если они не достаточно большие, то при их увеличении, картинка начинает «плыть». Так как они растровые. Это значит, что каждая точка (пиксель) в картинке имеет свои координаты и цвет. В то время, как картинки в формате SVG можно увеличивать до бесконечности (реально). При этом они будут пропорционально увеличиваться, сохраняя чёткие границы цвета при любых размерах. В общем – шик!
Именно по этому векторную картинку можно растянуть до размеров стены небоскрёба и она будет выглядеть также хорошо, как на экране монитора. Конечно, при ближайшем рассмотрении мы уткнёмся носом в большое поле, залитое одним цветом (или с лёгкой градационным переходом), но на небоскрёбы обычно картинки и не накладывают (если что).
Элементы в SVG-документе и SVG-анимация.
Кроме этого, все элементы в SVG-документе могут быть доступны и можно даже создавать SVG-анимацию, перемещая одни элементы относительно других, плавно деформируя их и накладывая свойства одних элементов на свойства других (как цвета, так и границы самих областей). И всё это описывается достаточно простыми функциями в виде кривых, которые соединяют точки. В этих точках (узлах) описаны свойства того, как себя должна вести функция (кривая) до и после прохождения этого узла. В общем, те, кто работал в CorelDROW или в Adobe Illustrator, знают на собственном опыте, на сколько это тонкий и одновременно простой в использовании инструмент.
Некоторые помнят мультики про Масяню, которые были сделаны как раз в этой технологии (в кривых), которые тогда ещё применялись во FLASH-анимации. FLASH ушёл. На смену ему пришёл SVG формат и он постепенно захватывает виртуальное пространство на сайтах.
Как же вставить SVG-картинку напрямую в HTML-документ? Обычно это делается как с обычной картинкой тэгом <img>. Но, так как SVG-файл представляет из себя XML-документ, то он может быть интегрирован прямо в HTML или даже в CSS разметку. Для этого лучше его предварительно перекодировать (для лучшей совместимости с разными браузерами).
Удобный SVG-encoder для работы с SVG-документом.
И огромное спасибо девушке Yoksel из Москвы, которая написала удобный SVG-encoder, который позволяет быстро и он-лайн проделать все нужные для этого манипуляции с SVG-документом. Респект ей и уважуха!
Ну и конечно ссылка на её URL-encoder для SVG, расположенный на GitHub → откроется в новой вкладке.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
