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

Скачать исходники для статьи можно ниже

Для редактирования и создания нам понадобиться онлайн SVG-редактор, например: “http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html”

или просто вбейте в поисковик “онлайн SVG-редактор”.

Также можно поискать готовый код кнопок на “codepen.io”, в нем в строку поиска введите “SVG button”.

С помощью вышеуказанных инструментов можно создать красивые кнопки.
Вот например, возьмем код следующей кнопки с “http://codepen.io/bjango/pen/ICozf”:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 40" xml:space="preserve">

<path style="fill:#404040;" d="M20,39.25C9.386,39.25,0.75,30.614,0.75,20S9.386,0.75,20,0.75h160c10.614,0,19.25,8.636,19.25,19.25S190.614,39.25,180,39.25H20z"/>
<path style="fill:#FFFFFF;" d="M180,1.5c10.201,0,18.5,8.299,18.5,18.5s-8.299,18.5-18.5,18.5H20C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5H180M180,0H20C8.954,0,0,8.954,0,20s8.954,20,20,20h160c11.046,0,20-8.954,20-20S191.046,0,180,0L180,0z"/>

<defs>
	<polygon id="polyclip" points="-42.167,40 -230,40 -190,0 -2.167,0"/>
</defs>
<clipPath id="clipper">
	<use xlink:href="#polyclip"  style="overflow:visible;"/>
</clipPath>
<g style="opacity:0.2;clip-path:url(#clipper);">
	<path style="fill:#FFFFFF;" d="M200,20c0,11.046-8.954,20-20,20H20C8.954,40,0,31.046,0,20l0,0C0,8.954,8.954,0,20,0h160C191.046,0,200,8.954,200,20L200,20z"/>
</g>
<animateTransform xlink:href="#polyclip" attributeName="transform" type="translate" from="-1000 0" to="2500 0" begin="0s" dur="3s" repeatCount="indefinite" />
</svg>

Теперь переходим на онлайн SVG-редактор (“http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html”), жмем на кнопку:

и вставляем в него код кнопки с “codepen.io”:

Далее создаем новый слой:

И с помощью кнопочки слева, вводим текст:

Теперь опять жмем на кнопку и копируем код отредактированной нами кнопки:

Вот код кнопки, которая у меня получилась:

<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <polygon points="-42.167,40 -230,40 -190,0 -2.167,0" id="polyclip"/>
 </defs>
 <clipPath id="clipper">
  <use id="svg_1" xlink:href="#polyclip"/>
 </clipPath>
 <g>
  <title>Layer 1</title>
  <path id="svg_2" fill="#404040" d="m20,39.25c-10.614,0 -19.25,-8.636 -19.25,-19.25s8.636,-19.25 19.25,-19.25h160c10.614,0 19.25,8.636 19.25,19.25s-8.636,19.25 -19.25,19.25h-160l0,0z"/>
  <path id="svg_3" fill="#FFFFFF" d="m180,1.5c10.201,0 18.5,8.299 18.5,18.5s-8.299,18.5 -18.5,18.5h-160c-10.201,0 -18.5,-8.299 -18.5,-18.5s8.299,-18.5 18.5,-18.5h160m0,-1.5h-160c-11.046,0 -20,8.954 -20,20s8.954,20 20,20h160c11.04601,0 20,-8.954 20,-20s-8.95399,-20 -20,-20l0,0z"/>
  <g id="svg_4" opacity="0.2" clip-path="url(#clipper)">
   <path id="svg_5" fill="#FFFFFF" d="m200,20c0,11.046 -8.95399,20 -20,20h-160c-11.046,0 -20,-8.954 -20,-20l0,0c0,-11.046 8.954,-20 20,-20h160c11.04601,0 20,8.954 20,20l0,0z"/>
  </g>
 </g>
 <g>
  <title>Слой 2</title>
  <text transform="matrix(10.636363983154297,0,0,1.2592592239379883,-236.09091758728027,3.629629135131836) " xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_6" y="7" x="30" stroke-width="0" stroke="#000000" fill="#000000"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_7" y="25" x="103" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#fcf9f9">подписаться</text>
 </g>
</svg>

Можете вставить данный код в Текстовой виджет вашего сайта и посмотреть как – она будет работать – для этого заходим в админку, в левом меню выбираем пункт “Внешний вид” – подпункт “Виджеты” – перетаскиваем виджет с названием “Текст” в сайдбар, в нужное место, и вставляем в него код нашей кнопки:

Готово!

Теперь рассмотрим ещё примеры, как к SVG логотипу прикрутить анимацию с помощью CSS.

Возьмем вот такой логотип:

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'>
 
<path class="adobe-logo" d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
 
</svg>

Значок фирмы Adobe

Теперь добавим анимации с помощью CSS:

.adobe-logo {
transition: .3s ease-out;
}
.adobe-logo:hover {
fill: #3881cc;
}

 
SVG логотип будет заполняться синим цветом при наведении.

А вот ещё один пример анимации для данного SVG логотипа:

.adobe-logo {
stroke: #fee16e;
}
.adobe-logo:hover {
fill: #feae6e;
stroke-width: 8;
}
.adobe-logo {
transition: .3s ease-out;
}