<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Варианты использования SVG на сайтах. Часть #1

Варианты использования SVG на сайтах. Часть #1

SVG - это векторная графика, представленная в XML-формате. Данный формат удобен для веб-разработчиков из-за доступности управления им через CSS-стили и JavaSсript код, с возможностью анимации.


Три способы вставки SVG графики в HTML документ

1) Прямая вставка содержимого SVG файла

Открываете SVG файл через любой редактор кода, копируете все что находится между тегами <svg></svg> и вставляете в HTML-документ. У тега svg есть ряд атрибутов, которые обозначают следующее:

  • width - ширина SVG изображения
  • height -высота SVG изображения
  • viewBox - размер холста для рисования изображения
  • g - группа элементов
  • элемент path - содержит координаты контура

Варианты использования SVG на сайтах.

2) Подключение через img тег

<img src="image.svg" alt="">

3) Вставить через CSS-свойство background-image

<div class="bg-image"></div>

.bg-image {
    width: 50px;
    height: 50px;
    background-image: url(image.svg);
}

Когда какой способ лучше всего использовать?

Чтобы ответить на этот вопрос, нужно ответить на другой вопрос: А будет конечный пользователь взаимодействовать с изображением или нет? Если нет, то целесообразнее вставлять SVG изображение на сайт, как картинку (первый и второй способы). Здесь хороший пример логотип, обычно он вставляется на сайт, как законченное изображение без анимаций и hover-эффектов.

Если мы планируем какие-то манипуляции (менять цвет, делать трансформацию), тогда вставляем первым способом. Способ подключения SVG изображения к сайту зависит от того, будет ли применяться интерактивность к элементу или нет.

Из чего состоит SVG изображение?

SVG элемент состоит из нескольких предопределенных примитивов:

  • прямоугольник - rest
  • круг - circle
  • эллипс - ellipse
  • прямая линия - line
  • ломаная линия - polyline
  • многоугольник - polygon
  • контур - path

Создание SVG прямоугольника

Пример №1 - прямоугольник с заливкой и обводкой

Сделаем HTML-разметку: разместим тег rect внутри тега svg с классом rect. Через класс rect, мы сможем управлять CSS-стилями прямоугольника. По умолчанию построение любой фигуры начинается от верхнего левого угла и чтобы фигура не прилипала к краю браузера, зададим внутри тега rest свои значения для X,Y, а также высоту и ширину фигуры. Подсветим пунктиром атрибут viewBox, через класс border.

<svg class="border" width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
    <rect class="rect" x='45' y='50' width='200' height='100'/>
</svg>

.border {
    border:2px dashed gray; /* пунктир viewBox */
}

.rect {
    fill: gold; /* цвет заливки прямоугольника */
    stroke: goldenrod; /* цвет контура прямоугольника */
    stroke-width: 6; /* ширина контура прямоугольника */
}


Варианты использования SVG на сайтах.

Пример №2 - полупрозрачный прямоугольник

Пример прямоугольник с полупрозрачными заливкой и обводкой. CSS-свойства fill-opacity и stroke-opacity задают прозрачность в диапазоне, от 0 до 1.

.rect-trans {
    fill-opacity: 0.3; /* прозрачность цвета заливки */
    stroke-opacity: 0.5; /* прозрачность цвета обводки */
    fill: powderblue; /* цвет заливки прямоугольника */
    stroke: blue; /* цвет контура прямоугольника */
    stroke-width: 6; /* ширина контура прямоугольника */
}


Варианты использования SVG на сайтах.

Пример №3 - прямоугольник с закругленными углами

Атрибуты rx и ry закругляют углы прямоугольника.

<svg class="border" width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
    <rect class="rect-round" x='45' y='50' width='200' height='100'/>
</svg>

.rect-round {
    fill: gold; /* цвет заливки прямоугольника */
    stroke: goldenrod; /* цвет обводки прямоугольника */
    stroke-width: 6; /* ширина контура прямоугольника */
    rx: 20; /* закругление по X */
    ry: 20; /* закругление по Y */
}


Варианты использования SVG на сайтах.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.