SVG Html текст и фон

SVG Html код, позволяющий воспользоваться возможностями Svg для решения своей задачи. В примере использован SVG текст и SVG фон с эффектом :hover. Пример реализован на чистом HTML, CSS, JavaScript без использования дополнительных библиотек.

Фото SVG Html

SVG Html текст и фон

Видео SVG Html

Описание SVG Html

Создание SVG рисунка

В начале, Вам нужно воспользоваться любым графическим редактором, который умеет работать с SVG. Мы использовали графический редактор Inscape.

Вставим на холст два слова «Maldi» и «a». Между ними мы поместим рисунок.

SVG Html step 1

Выбираем понравившуюся фотографию (для данного примера выбран скат) и выделяем его контуры с помощью инструмента рисовать кривые Безье.

Скат

После того, как скат полностью обведен линиями мы получили отдельный объект, который будем использовать в работе.

Так как линии этого объекта соеденины между собой острыми углами, необходимо растянув область выделения на всего ската использовать кнопку «Сделать выделенные сегменты кривыми» или «Сделать выделенные сегменты автоматически сглаженными». Так же можно вручную изменять углы у линий, с помощью специальных направляющих ( появляющихся при нажатии на точку).

Теперь мы можем переместить получившуюся картинку в буквы.

Скат svg

Можно залить картинку сплошным цветом. Итого мы должны получить следующее: 

Готовый SVG

Сейчас необходимо сохранить картинку, как SVG файл.

Мы бы советовали удалить из SVG файла все лишнее (удалить текст). В примере svg, который Вы скачаете, оставлены только нужные блоки. Сделайте так же со своим рисунком.

Необходимо открыть svg файл в текстовом редакторе и скопировать текст в свой html файл:

 
<body>

  <section id="header">
  <h1>Svg Html</h1>
  </section>

  <section id="Maldiwa">

    <svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:cc="http://creativecommons.org/ns#"

При этом каждый из трех объектов («Maldi», картинка ската и «a») будет иметь в коде свой id, с помощью которого на него можно будет накладывать CSS стиль:

<tspan sodipodi:role="line" id="tspan3370" 
x="2.781945" y="722.86261">Maldi

Для такого id, можно легко применить необходимый Вам CSS стиль:

#tspan3370, #tspan4205 {

    stroke: #05a8ff;
    fill: #05a8ff;
    transition: 1s ease-out;

}

И hover эффект:

#tspan3370:hover, #tspan4205:hover {
    fill: white;
    transition: 1s ease-out;
}

Перейти к примеру:

Пример Svg Html

Перейти к  разделу:

Html Template

Проект:

Maldiwa

Скачать:

SVG

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2 × 5 =