Рисуем SVG самостоятельно

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



Между нами говоря, выглядит довольно мрачно, очень похоже на гроб, но нам то какая разница? Надо – значит надо! Начнем с того, какие теги (фигуры) можно использовать:

• circle
• ellipse
• line
• polyline
• path
• rect
• polygon

Если у вас есть хотя бы небольшие знания английского языка, то догадаться, что есть что совсем просто. Нам больше всего подходит тег polygon. Задаем его и сразу же атрибуты:

<polygon points="120,50 995,80 975,290 65,310 50,90" style="fill:#000; filter: url(#svg-shadow);"></polygon>

Атрибут points – это координаты 5-ти точек. В стиле указываем заливку черным и откуда берем фильтр (как бы свечение по краям). Для фильтра пишем такой код:

<filter id="svg-shadow" filterUnits="userSpaceOnUse" x="0" y="0">
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="3" result="offsetBlr"></feOffset>
<feFlood flood-color="rgba(0,0,0,.75)"></feFlood>
<feComposite operator="in" in2="offsetBlr" result="colBlur"></feComposite>
<feMerge>
<feMergeNode in="colBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>

Все это не забываем обернуть в svg и на выходе получаем такой код:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1045 360" preserveAspectRatio="none">
<polygon points="120,50 995,80 975,290 65,310 50,90" style="fill:#000; filter: url(#svg-shadow);"></polygon>
<filter id="svg-shadow" filterUnits="userSpaceOnUse" x="0" y="0">
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="3" result="offsetBlr"></feOffset>
<feFlood flood-color="rgba(0,0,0,.75)"></feFlood>
<feComposite operator="in" in2="offsetBlr" result="colBlur"></feComposite>
<feMerge>
<feMergeNode in="colBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</svg>

Вот и все! В чем же преимущества svg? Во-первых, он легко редактируется руками. Во-вторых, с содержимым можно работать, например, с помощью JavaScript. В-третьих, чаще всего, картинка в таком формате весит меньше. Ну и некоторые другие мелкие, но приятные мелочи. Стоит только предусмотреть возможность открытия картинок старыми браузерам.