Трюки с SVG и тегом <image>

проигнорировав атрибут src, и покажут красивую векторную картинку. Браузеры, не поддерживающие SVG, проигнорируют неизвестный им тег svg и, благодаря тому что image и img — это синонимы, прочитают код как: и покажут обычную растровую картинку.

Read more Трюки с SVG и тегом <image>

SVG — это формат векторных изображений,

Элементы, содержащие SVG-графику, заворачиваются в div.svg (например). Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg, дальше немного CSS:

Read more SVG — это формат векторных изображений,

SVG-фигуры и трансформации

Следует отметить, что писать код руками совершенно не обязательно: с этим гораздо лучше справятся векторные редакторы, например, мощный, но платный Adobe Illustrator, бесплатный, но не такой удобный Inkscape, немного платный, но довольно симпатичный Sketch. Но имеет смысл хотя бы попробовать, потому что это а) интересно, б) полезно: навыки могут пригодиться, если надо нарисовать что-то простое, подправить код в отсутствие векторного редактора или вы хотите взаимодействовать с SVG через JavaScript.

Read more SVG-фигуры и трансформации

symbol

Символ — это группа фигур, представляющая собой единое целое. Так же, как и defs, не отображается на странице, и так же, как g, может быть использована ещё раз. Внутри символа действует своя система координат.

Read more symbol