Графические изображения в цифровом формате имеют множество форм и видов. Каждый из них используется для определенных целей, а также поддерживает свои ключевые особенности и нюансы.
Условно вся графика делится на две крупные категории: векторных изображений и растровых рисунков. Далее предстоит рассмотреть каждый тип графики более подробно. Особое внимание будет уделено формату SVG и основам работы с ним.
Растровое изображение – это…
Растровые рисунки – картинки с высокой степенью детализации и реалистичности. Они формируются из небольших квадратиков – растров (или пикселей). Соответствующие элементы становятся заметны при сильном увеличении изображения.
Растровая графика – множество мелких точек, задающих рисунок. У нее есть два ключевых параметра:
- Размер изображения – количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличить картинку без потери качества. Чем больше пикселей, тем больше мелких деталей можно увидеть на изображении.
- Глубина цвета. Указывает на то, сколько разных оттенков может быть распознано на картинке. Чем больше этот показатель, тем более плавными окажутся переходы на изображении.
Растровая графика – это самые качественные и детализированные изображения. Она широко используется в полиграфии, а также рекламе и обыденной жизни. Самый простой пример такого изображения – цифровое фото.
Векторная графика – это…
Изучая формат SVG, необходимо разобраться с понятием векторной графики. Что такое растровое изображение, понятно. В случае с векторными рисунками картинка будет задаваться не пикселями, а математическими формулами. Каждое изображение такого плана будет формироваться отдельными элементами:
- эллипсами;
- точками;
- кривыми различной сложности;
- прямоугольниками;
- многоугольниками;
- ломаными.
Для построения изображения каждый компонент будет обладать своим набором параметров. Сюда относят:
- размер;
- цвет;
- координаты;
- толщину линий;
- прозрачность;
- радиус кривизны и так далее.
Работать с векторными картинками проще, чем с растровыми. Они используются в чертежах, а также схемах и таблицах. Там, где реалистичность и степень детализации уходят на второй план.
SVG графика произошла от Scalable Vector Graphics или «масштабируемая векторная графика». Данный формат – графика, которая формируется при помощи геометрических объектов: линий, кругов и так далее.
SVG – язык разметки масштабируемой векторной графики, который был создан W3C (Консорциумом Векторной Паутины). Он входит в подмножество расширяемого языка XML-разметки. Используется для описания двумерных векторных и смешанных векторно/растровых картинок в XML-формате.
SVG начал развиваться в 1999 году. Сейчас соответствующий формат используется на всех современный сайтах. С его помощью происходит отрисовка картинок и иконок. Чаще всего SVG графика используется для формирования логотипов и миниатюр.
Базовый состав
Использовать SVG может любой веб-программист. Чтобы грамотно работать с этим расширением документов, необходимо изучить его более подробно. Рисование SVG возможно при помощи некоторых базовых фигур:
- линии – простые и ломаные;
- прямоугольники;
- окружности;
- многоугольники;
- эллипсы.
Все перечисленные фигуры могут быть использованы как поодиночке, так и совместно, создавая любые полноформатные картинки: людей, животных, города, пейзажи и так далее.
Программы для работы
Работа с файлами SVG может производиться в любом графическом редакторе, поддерживающем векторные рисунки. Пример – Figma. Здесь допускается не только изменение уже существующих SVG-файлов, но и создание собственных картинок соответствующего формата. Для этого в приложении имеются инструменты:
- перо;
- квадрат;
- стрелка;
- линия;
- звездочка;
- эллипс;
- треугольник.
Допускается использование плагинов, позволяющих создание различных элементов. Пример – Shaper. С его помощью в один клик получится добавлять необычные фигуры на подготовленный фон.
Figma – это не профессиональный редактор SVG графики. С соответствующим форматом рекомендуется работать через:
- CorelDraw – наиболее популярный редактор. Он подойдет как новичкам, так и более опытным дизайнерам.
- Adobe Illustrator – стандарт в области полиграфии. Именно здесь можно качественно переносить SVG изображения из компьютера на бумагу или иные носители. Масштабирование допускается до 64 000%.
- Gravit Designer – полнофункциональный редактор векторных рисунков. Подойдет для любых задач – от дизайна интерфейсов и иконок до работы с презентациями и анимацией.
Предложенный список не является исчерпывающим. Существуют и иные, менее популярные графические редакторы с поддержкой SVG. В Интернете пользователи могут найти много бесплатного программного обеспечения для работы с изучаемым графическим форматом.
Преимущества и недостатки
Какой формат SVG, понятно. С ним удобно работать как новичкам, так и опытным дизайнерам. У рассматриваемого формата есть преимущества и недостатки. Зная о них, каждый сможет разобраться, стоит ли пользоваться такими векторными рисунками в проектах.
Плюсы
Первым преимуществом SVG файлов является их масштабируемость. При увеличении фотографии в PNG или JPG может произойти ухудшение качества. В случае с SVG ситуация иная – картинка останется такой же качественной.
Векторные рисунки можно увеличивать во сколько угодно раз. Они все равно сохранят свой первоначальный вид. Именно поэтому SVG элементы хорошо отображаются при больших разрешениях без потери качества. Они отлично подходят для адаптивных сайтов.
Второе преимущество формата – его кастомизация. Для изменения цвета иконки в PNG или JPG нужно приложить немало усилий. В случае с SVG-изображениями достаточно зайти в графический редактор и поменять цвет иконки буквально в один клик. Так, словно пользователь вносит изменения в обычный графический элемент.
SVG открывается в HTML и CSS. Это значит, что допускается прямое изменение параметров и атрибутов компонента рассматриваемого формата прямо через код.
Очередной сильной стороной SVG-изображений становится вес файла – он на порядок меньше, чем у любой растровой картинки при равных характеристиках. Дополнительно необходимо обратить внимание на то, что SVG поддерживает возможность анимирования через JavaScript. С «обычной» картинкой подобные манипуляции проделать достаточно проблематично.
Недостатки
Существенных недостатков у SVG Image нет. Дизайнерам и разработчикам рекомендуется запомнить следующие тонкости работы с форматом:
- Он не может быть использован для фото. Связано это с тем, что такое изображение получится очень большим.
- Не предусматривается поддержка старыми браузерами.
Рассматриваемый формат – лучший вариант для иконок, а также анимированных компонентов и иллюстраций на сайте.
Возможности языка
SVG – это не просто графический компонент, а еще и специализированный язык для описания векторной графики. Далее он будет рассмотрен более подробно. Стандарт имеет следующие возможности:
- Описание путей. Дает возможность задать любую фигуру небольшой строкой с путем от начальной до конечной точки. Промежуточные координаты могут быть любыми. Строка задается атрибутом d тега path. Она включает в себя команды, которые кодируются числовыми и буквенными наборами. Буквы определяют тип команды, числа – ее параметры.
- Описание основных геометрических фигур.
- Широкий спектр визуальных свойств. Они могут применяться к путям и фигурам. Сюда относятся: окраска, скругление углов, прозрачность и так далее.
- Интерактивность. На каждый отдельный компонент и целое изображение можно прикрепить обработчик событий. Этот прием позволяет управлять рисунками на экране.
- Анимации и сценарии. При помощи JavaScript и ECMAScript допускается описание сложных сценариев, связанных с математическими вычислениями координат и пропорций фигур.
SVG-файлы описываются тестом. Их легко читать и редактировать. Данный формат является открытым стандартом и не является чьей-либо собственностью. Он совместим с CSS и имеет преимущества XML.
Интерпретация в коде
Теперь можно изучить тег SVG и его особенности. Данная запись является парной. Толщиной и цветом линии можно управлять при помощи обводки – stroke. С ее помощью можно задать один общий атрибут для контейнера SVG, а можно задавать его каждому отдельному вложенному компоненту. Это поможет сделать разную обводку на одной и той же картинке.
Подключение изображения рассматриваемого формата осуществляется несколькими способами:
- Img. Самый простой способ – это использовать в HTML тег img. В нем указывается путь до SVG-картинки в значении атрибута src. Данный вариант не позволяет изменять заливку и цвет фона.
- Background-image. Этот вариант подойдет для картинок, которые не являются контейнерными. Подключение происходит как фона для того или иного элемента. Здесь отсутствует возможность управления CSS стилями.
- В HTML. Вставка прямо в разметку HTML-страницы – еще один вариант подключения SVG. В данной случае можно управлять стилями изображения через CSS. Этот подход подойдет для анимирования векторных картинок.
Ниже можно увидеть наглядный пример реализации последнего типа подключения картинки:
Теперь можно рассмотреть параметры SVG. Они нужны для грамотной настройки изображения на странице.
Атрибуты
Для вставки SVG-кода необходимо помнить о следующих параметрах:
- Fill – заливка. Может использоваться для всего контейнера или для его частей.
- Stroke – обводка.
- ViewBox – размер окна изображения. Может указываться для всей картинки или для ее отдельных компонентов. Этот атрибут позволяет кадрировать изображение.
- Width/height – размеры картинки. Значениями выступают числа без указания единиц измерения. В этом случае браузер воспринимает их в качестве пикселей. Можно использовать процентные показатели.
- PreserveAspectRatio – необходимость сохранения пропорций при масштабировании изображения. Если значение атрибута отличается от none, то оно будет включать в себя две части: выравнивание и пропорции.
Для обрезки используются meet (картинка пытается уместиться целиком с сохранением пропорций) и slice (для заполнения изображением всего имеющегося пространства).
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title>Основы работы с SVG OTUS</title>
<!-- All in One SEO 4.5.2.1 - aioseo.com -->
<meta name="description" content="Графические изображения в цифровом формате имеют множество форм и видов. Каждый из них используется для определенных целей, а также поддерживает свои ключевые особенности и нюансы. Условно вся графика делится на две крупные категории: векторных изображений и растровых рисунков. Далее предстоит рассмотреть каждый тип графики более подробно. Особое внимание будет уделено формату SVG и основам работы" />
<meta name="robots" content="max-image-preview:large" />
<link rel="canonical" href="https://otus.ru/journal/osnovy-raboty-s-svg/" />
<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
<script type="application/ld+json" class="aioseo-schema">
{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#article","name":"\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG OTUS","headline":"\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2023\/11\/oj-1080x72040-1.jpg","width":2245,"height":1587},"datePublished":"2023-11-15T21:23:58+00:00","dateModified":"2023-12-19T18:49:29+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, Design, SVG, \u0414\u0438\u0437\u0430\u0439\u043d"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#listItem","position":2,"name":"\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#webpage","url":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/","name":"\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG OTUS","description":"\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0438\u043c\u0435\u044e\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0444\u043e\u0440\u043c \u0438 \u0432\u0438\u0434\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u044e\u0430\u043d\u0441\u044b. \u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0432\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438: \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u0443\u043d\u043a\u043e\u0432. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0435\u043b\u0435\u043d\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0443 SVG \u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u044b","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2023\/11\/oj-1080x72040-1.jpg","@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#mainImage","width":2245,"height":1587},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/osnovy-raboty-s-svg\/#mainImage"},"datePublished":"2023-11-15T21:23:58+00:00","dateModified":"2023-12-19T18:49:29+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
</script>
<!-- All in One SEO -->
<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/8029" /><link rel='shortlink' href='https://otus.ru/journal/?p=8029' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F&format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
<style type="text/css" id="wp-custom-css">
#menu-item-10406 .wpel-icon {
display: none;
}
#menu-item-10407 .wpel-icon {
display: none;
}
.otus-login-site a .wpel-icon {
display: none;
}
.menu-menju-navykov-container a .wpel-icon {
display: none;
}
.otus-login-site a
{
background: #ffd709;
border-radius: 12px;
color: #0f0f10;
font-size: 14px;
font-weight: 700;
line-height: 20px;
display: block;
text-align: center;
padding: 8px 25px;
}
.main-footer.dark {
background: linear-gradient(90deg, #a64fc5, #4f54e6);
border-color: transparent;
}
.main-footer.bold .copyright {
color: #fff;
}
.main-footer.bold .to-top i {
color: #fff;
}
.main-footer.bold .back-to-top {
color: #fff;
}
.nav__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scrollable-menu .menu {
display: flex;
}
.nav__scroll
{
background: linear-gradient(90deg, #a64fc5, #4f54e6);
}
.scrollable-menu .menu .menu-item {
flex: 0 0 auto;
padding: 15px 15px;
}
.scrollable-menu .menu .menu-item a {
color: #fff;
}
.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}
.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}
.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/
body {
min-width: 320px;
}
.banner-click img {
margin: 0 auto;
display: block;
}
.banner-click {
cursor: pointer;
}
.banner-footer-area {
margin-bottom: 20px;
}
.banner-left-area {
margin-top: 40px;
} </style>
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
//event.detail.contactFormId;
if(ym){
//console.log(event.detail);
ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
ym(34531570, 'params', {
page_url: window.location.href,
status: event.detail.status,
locale: event.detail.contactFormLocale,
form_id: event.detail.contactFormId,
});
}
}, false );
</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->
</head>
<body class="post-template-default single single-post postid-8029 single-format-standard right-sidebar lazy-normal has-lb">
<div class="main-wrap">
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">
<div class="inner inner-head" data-sticky-bar="0">
<div class="wrap cf wrap-head">
<div class="left-contain">
<span class="mobile-nav"><i class="fa fa-bars"></i></span>
<div class="title">
<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
</a>
</div>
</div>
<div class="navigation-wrap inline">
<nav class="navigation inline simple light" data-sticky-bar="0">
<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </nav>
</div>
<div class="actions">
<div class="otus-login-site">
<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
</header> <!-- .main-head -->
<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
<div class="container wrap">
<div class="links inline simple light scrollable-menu">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
</div>
</div>
<div class="main wrap">
<div class="ts-row cf">
<div class="col-8 main-content cf">
<article id="post-8029" class="the-post post-8029 post type-post status-publish format-standard has-post-thumbnail category-polza tag-design tag-svg tag-dizajn">
<header class="post-header the-post-header cf">
<div class="post-meta the-post-meta">
<span class="post-cat">
<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>
</span>
<h1 class="post-title">
Основы работы с SVG
</h1>
<a href="https://otus.ru/journal/osnovy-raboty-s-svg/" class="date-link" data-wpel-link="internal"><time class="post-date">15 ноября, 2023</time></a>
</div>
<div class="featured">
<a href="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72040-1.jpg" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Основы работы с SVG" title="Основы работы с SVG" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72040-1-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72040-1-270x180.jpg 270w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72040-1-770x515.jpg" data-sizes="(max-width: 770px) 100vw, 770px" /> </a>
</div>
</header><!-- .post-header -->
<div class="post-content description cf entry-content content-normal">
<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6" title="Растровое изображение – это…">Растровое изображение – это…</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6" title="Векторная графика – это…">Векторная графика – это…</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#SVG_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6" title="SVG – это…">SVG – это…</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BE%D1%81%D1%82%D0%B0%D0%B2" title="Базовый состав">Базовый состав</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D1%8B_%D0%B4%D0%BB%D1%8F_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B" title="Программы для работы">Программы для работы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0_%D0%B8_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8" title="Преимущества и недостатки">Преимущества и недостатки</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%9F%D0%BB%D1%8E%D1%81%D1%8B" title="Плюсы">Плюсы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%9D%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8" title="Недостатки">Недостатки</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0" title="Возможности языка">Возможности языка</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-10" href="#%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%B2_%D0%BA%D0%BE%D0%B4%D0%B5" title="Интерпретация в коде">Интерпретация в коде</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-11" href="#%D0%90%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B" title="Атрибуты">Атрибуты</a></li></ul></nav></div>
<p>Графические изображения в цифровом формате имеют множество форм и видов. Каждый из них используется для определенных целей, а также поддерживает свои ключевые особенности и нюансы.</p>
<p>Условно вся графика делится на две крупные категории: векторных изображений и растровых рисунков. Далее предстоит рассмотреть каждый тип графики более подробно. Особое внимание будет уделено формату SVG и основам работы с ним.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6"></span>Растровое изображение – это…<span class="ez-toc-section-end"></span></h2>
<p>Растровые рисунки – картинки с высокой степенью детализации и реалистичности. Они формируются из небольших квадратиков – растров (или пикселей). Соответствующие элементы становятся заметны при сильном увеличении изображения.</p>
<p>Растровая графика – множество мелких точек, задающих рисунок. У нее есть два ключевых параметра:</p>
<ol>
<li>Размер изображения – количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличить картинку без потери качества. Чем больше пикселей, тем больше мелких деталей можно увидеть на изображении.</li>
<li>Глубина цвета. Указывает на то, сколько разных оттенков может быть распознано на картинке. Чем больше этот показатель, тем более плавными окажутся переходы на изображении.</li>
</ol>
<p>Растровая графика – это самые качественные и детализированные изображения. Она широко используется в полиграфии, а также рекламе и обыденной жизни. Самый простой пример такого изображения – цифровое фото.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6"></span>Векторная графика – это…<span class="ez-toc-section-end"></span></h2>
<p>Изучая формат SVG, необходимо разобраться с понятием векторной графики. Что такое растровое изображение, понятно. В случае с векторными рисунками картинка будет задаваться не пикселями, а математическими формулами. Каждое изображение такого плана будет формироваться отдельными элементами:</p>
<ul>
<li>эллипсами;</li>
<li>точками;</li>
<li>кривыми различной сложности;</li>
<li>прямоугольниками;</li>
<li>многоугольниками;</li>
<li>ломаными.</li>
</ul>
<p>Для построения изображения каждый компонент будет обладать своим набором параметров. Сюда относят:</p>
<ul>
<li>размер;</li>
<li>цвет;</li>
<li>координаты;</li>
<li>толщину линий;</li>
<li>прозрачность;</li>
<li>радиус кривизны и так далее.</li>
</ul>
<p>Работать с векторными картинками проще, чем с растровыми. Они используются в чертежах, а также схемах и таблицах. Там, где реалистичность и степень детализации уходят на второй план.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="SVG_%E2%80%93_%D1%8D%D1%82%D0%BE%E2%80%A6"></span>SVG – это…<span class="ez-toc-section-end"></span></h2>
<p>SVG графика произошла от Scalable Vector Graphics или «масштабируемая векторная графика». Данный формат – графика, которая формируется при помощи геометрических объектов: линий, кругов и так далее.</p>
<p>SVG – язык разметки масштабируемой векторной графики, который был создан W3C (Консорциумом Векторной Паутины). Он входит в подмножество расширяемого языка XML-разметки. Используется для описания двумерных векторных и смешанных векторно/растровых картинок в XML-формате.</p>
<p>SVG начал развиваться в 1999 году. Сейчас соответствующий формат используется на всех современный сайтах. С его помощью происходит отрисовка картинок и иконок. Чаще всего SVG графика используется для формирования логотипов и миниатюр.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BE%D1%81%D1%82%D0%B0%D0%B2"></span>Базовый состав<span class="ez-toc-section-end"></span></h2>
<p>Использовать SVG может любой веб-программист. Чтобы грамотно работать с этим расширением документов, необходимо изучить его более подробно. Рисование SVG возможно при помощи некоторых базовых фигур:</p>
<ul>
<li>линии – простые и ломаные;</li>
<li>прямоугольники;</li>
<li>окружности;</li>
<li>многоугольники;</li>
<li>эллипсы.</li>
</ul>
<p>Все перечисленные фигуры могут быть использованы как поодиночке, так и совместно, создавая любые полноформатные картинки: людей, животных, города, пейзажи и так далее.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D1%8B_%D0%B4%D0%BB%D1%8F_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B"></span>Программы для работы<span class="ez-toc-section-end"></span></h2>
<p>Работа с файлами SVG может производиться в любом графическом редакторе, поддерживающем векторные рисунки. Пример – Figma. Здесь допускается не только изменение уже существующих SVG-файлов, но и создание собственных картинок соответствующего формата. Для этого в приложении имеются инструменты:</p>
<ul>
<li>перо;</li>
<li>квадрат;</li>
<li>стрелка;</li>
<li>линия;</li>
<li>звездочка;</li>
<li>эллипс;</li>
<li>треугольник.</li>
</ul>
<p>Допускается использование плагинов, позволяющих создание различных элементов. Пример – Shaper. С его помощью в один клик получится добавлять необычные фигуры на подготовленный фон.</p>
<p>Figma – это не профессиональный редактор SVG графики. С соответствующим форматом рекомендуется работать через:</p>
<ol>
<li>CorelDraw – наиболее популярный редактор. Он подойдет как новичкам, так и более опытным дизайнерам.</li>
<li>Adobe Illustrator – стандарт в области полиграфии. Именно здесь можно качественно переносить SVG изображения из компьютера на бумагу или иные носители. Масштабирование допускается до 64 000%.</li>
<li>Gravit Designer – полнофункциональный редактор векторных рисунков. Подойдет для любых задач – от дизайна интерфейсов и иконок до работы с презентациями и анимацией.</li>
</ol>
<p>Предложенный список не является исчерпывающим. Существуют и иные, менее популярные графические редакторы с поддержкой SVG. В Интернете пользователи могут найти много бесплатного программного обеспечения для работы с изучаемым графическим форматом.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0_%D0%B8_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8"></span>Преимущества и недостатки<span class="ez-toc-section-end"></span></h2>
<p>Какой формат SVG, понятно. С ним удобно работать как новичкам, так и опытным дизайнерам. У рассматриваемого формата есть преимущества и недостатки. Зная о них, каждый сможет разобраться, стоит ли пользоваться такими векторными рисунками в проектах.</p>
<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D0%BB%D1%8E%D1%81%D1%8B"></span>Плюсы<span class="ez-toc-section-end"></span></h3>
<p>Первым преимуществом SVG файлов является их масштабируемость. При увеличении фотографии в PNG или JPG может произойти ухудшение качества. В случае с SVG ситуация иная – картинка останется такой же качественной.</p>
<p>Векторные рисунки можно увеличивать во сколько угодно раз. Они все равно сохранят свой первоначальный вид. Именно поэтому SVG элементы хорошо отображаются при больших разрешениях без потери качества. Они отлично подходят для адаптивных сайтов.</p>
<p>Второе преимущество формата – его кастомизация. Для изменения цвета иконки в PNG или JPG нужно приложить немало усилий. В случае с SVG-изображениями достаточно зайти в графический редактор и поменять цвет иконки буквально в один клик. Так, словно пользователь вносит изменения в обычный графический элемент.</p>
<p>SVG открывается в HTML и CSS. Это значит, что допускается прямое изменение параметров и атрибутов компонента рассматриваемого формата прямо через код.</p>
<p>Очередной сильной стороной SVG-изображений становится вес файла – он на порядок меньше, чем у любой растровой картинки при равных характеристиках. Дополнительно необходимо обратить внимание на то, что SVG поддерживает возможность анимирования через JavaScript. С «обычной» картинкой подобные манипуляции проделать достаточно проблематично.</p>
<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8"></span>Недостатки<span class="ez-toc-section-end"></span></h3>
<p>Существенных недостатков у SVG Image нет. Дизайнерам и разработчикам рекомендуется запомнить следующие тонкости работы с форматом:</p>
<ol>
<li>Он не может быть использован для фото. Связано это с тем, что такое изображение получится очень большим.</li>
<li>Не предусматривается поддержка старыми браузерами.</li>
</ol>
<p>Рассматриваемый формат – лучший вариант для иконок, а также анимированных компонентов и иллюстраций на сайте.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0"></span>Возможности языка<span class="ez-toc-section-end"></span></h2>
<p>SVG – это не просто графический компонент, а еще и специализированный язык для описания векторной графики. Далее он будет рассмотрен более подробно. Стандарт имеет следующие возможности:</p>
<ol>
<li>Описание путей. Дает возможность задать любую фигуру небольшой строкой с путем от начальной до конечной точки. Промежуточные координаты могут быть любыми. Строка задается атрибутом d тега path. Она включает в себя команды, которые кодируются числовыми и буквенными наборами. Буквы определяют тип команды, числа – ее параметры.</li>
<li>Описание основных геометрических фигур.</li>
<li>Широкий спектр визуальных свойств. Они могут применяться к путям и фигурам. Сюда относятся: окраска, скругление углов, прозрачность и так далее.</li>
<li>Интерактивность. На каждый отдельный компонент и целое изображение можно прикрепить обработчик событий. Этот прием позволяет управлять рисунками на экране.</li>
<li>Анимации и сценарии. При помощи JavaScript и ECMAScript допускается описание сложных сценариев, связанных с математическими вычислениями координат и пропорций фигур.</li>
</ol>
<p>SVG-файлы описываются тестом. Их легко читать и редактировать. Данный формат является открытым стандартом и не является чьей-либо собственностью. Он совместим с CSS и имеет преимущества XML.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BF%D1%80%D0%B5%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%B2_%D0%BA%D0%BE%D0%B4%D0%B5"></span>Интерпретация в коде<span class="ez-toc-section-end"></span></h2>
<p>Теперь можно изучить тег SVG и его особенности. Данная запись является парной. Толщиной и цветом линии можно управлять при помощи обводки – stroke. С ее помощью можно задать один общий атрибут для контейнера SVG, а можно задавать его каждому отдельному вложенному компоненту. Это поможет сделать разную обводку на одной и той же картинке.</p>
<p>Подключение изображения рассматриваемого формата осуществляется несколькими способами:</p>
<ol>
<li>Img. Самый простой способ – это использовать в HTML тег img. В нем указывается путь до SVG-картинки в значении атрибута src. Данный вариант не позволяет изменять заливку и цвет фона.</li>
<li>Background-image. Этот вариант подойдет для картинок, которые не являются контейнерными. Подключение происходит как фона для того или иного элемента. Здесь отсутствует возможность управления CSS стилями.</li>
<li>В HTML. Вставка прямо в разметку HTML-страницы – еще один вариант подключения SVG. В данной случае можно управлять стилями изображения через CSS. Этот подход подойдет для анимирования векторных картинок.</li>
</ol>
<p>Ниже можно увидеть наглядный пример реализации последнего типа подключения картинки:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/c1GIRNyIaeg4re9L4H4l1i-vGPIdwyKNRxwgenqejOiE1CQiRK8W5-qeTfUAESdgs8zAg1xL7E38FHISorlcygRUsdoG6pH8s30JoTvdv8sS9Cdhk9Rh5LZwTEI9jvqAdwJ_nu1tOHI4Q-IdwCqTIQ" alt="Основы работы с SVG"/></figure>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/2Rz2DuU55399sOqB8HvTXBojiOXPfU9MLqbJFc2cf-ildBmjlMxH3ixWInoPn_ICsTVzn5gpow1-bltYmPLVDVhjtXK9vPvlh8n1i3arAEUdGGYgsMNW4dGCGqppvc2z5ZVMIx0foBT_ol5IOMcIXA" alt="Основы работы с SVG"/></figure>
<p>Теперь можно рассмотреть параметры SVG. Они нужны для грамотной настройки изображения на странице.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%90%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B"></span>Атрибуты<span class="ez-toc-section-end"></span></h2>
<p>Для вставки SVG-кода необходимо помнить о следующих параметрах:</p>
<ol>
<li>Fill – заливка. Может использоваться для всего контейнера или для его частей.</li>
<li>Stroke – обводка.</li>
<li>ViewBox – размер окна изображения. Может указываться для всей картинки или для ее отдельных компонентов. Этот атрибут позволяет кадрировать изображение.</li>
<li>Width/height – размеры картинки. Значениями выступают числа без указания единиц измерения. В этом случае браузер воспринимает их в качестве пикселей. Можно использовать процентные показатели.</li>
<li>PreserveAspectRatio – необходимость сохранения пропорций при масштабировании изображения. Если значение атрибута отличается от none, то оно будет включать в себя две части: выравнивание и пропорции.</li>
</ol>
<p>Для обрезки используются meet (картинка пытается уместиться целиком с сохранением пропорций) и slice (для заполнения изображением всего имеющегося пространства). </p>
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a href="https://otus.ru/?utm_source=oj" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>. В частности, вас может заинтересовать <a href="https://otus.ru/lessons/specializacija-fullstack-dev/?utm_source=oj&utm_medium=affilate&utm_campaign=spec_js" title="" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS<span class="wpel-icon wpel-image wpel-icon-6"></span></a></em>.</p>
<p></p>
</div><!-- .post-content -->
<div class="the-post-foot cf">
<div class="tag-share cf">
<div class="post-tags"><a href="https://otus.ru/journal/tag/design/" rel="tag" data-wpel-link="internal">Design</a><a href="https://otus.ru/journal/tag/svg/" rel="tag" data-wpel-link="internal">SVG</a><a href="https://otus.ru/journal/tag/dizajn/" rel="tag" data-wpel-link="internal">Дизайн</a></div>
<div class="post-share">
<div class="post-share-icons cf">
<span class="counters">
</span>
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F&text=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20%D1%81%20SVG" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fosnovy-raboty-s-svg%2F&media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2023%2F11%2Foj-1080x72040-1.jpg&description=%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20%D1%81%20SVG" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
</div>
</div>
</div>
<div class="post-nav">
<div class="post previous cf">
<a href="https://otus.ru/journal/html-opisanie-harakteristika-primery/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-left"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/html-opisanie-harakteristika-primery/" class="image-link" rel="previous" data-wpel-link="internal">
<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="HTML: описание, характеристика, примеры" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72039-1-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="HTML: описание, характеристика, примеры" /> </a>
<div class="post-meta">
<span class="label">Prev Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/html-opisanie-harakteristika-primery/" data-wpel-link="internal">HTML: описание, характеристика, примеры</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/html-opisanie-harakteristika-primery/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2023-11-15T21:11:16+00:00">15 ноября, 2023</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">7 Mins Read</span>
</div>
</div> </div>
</span>
</div>
<div class="post next cf">
<a href="https://otus.ru/journal/pervoe-znakomstvo-s-ubuntu/" title="Next Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-right"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/pervoe-znakomstvo-s-ubuntu/" class="image-link" rel="next" data-wpel-link="internal">
<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Первое знакомство с Ubuntu" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2023/11/oj-1080x72041-1-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Первое знакомство с Ubuntu" /> </a>
<div class="post-meta">
<span class="label">Next Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/pervoe-znakomstvo-s-ubuntu/" data-wpel-link="internal">Первое знакомство с Ubuntu</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/pervoe-znakomstvo-s-ubuntu/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2023-11-15T21:39:42+00:00">15 ноября, 2023</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">6 Mins Read</span>
</div>
</div> </div>
</span>
</div>
</div>
<section class="related-posts grid-3">
<h4 class="section-head"><span class="title">Читать ещё</span></h4>
<div class="ts-row posts cf">
<article class="post col-4">
<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
</div>
</div>
</article >
</div>
</section>
</article> <!-- .the-post -->
</div>
<aside class="col-4 sidebar">
<div class="inner">
<ul>
<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
<form method="get" class="search-form" action="https://otus.ru/journal/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
</label>
<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>
</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
</ul>
</div>
</aside>
</div> <!-- .ts-row -->
</div> <!-- .main -->
<footer class="main-footer dark bold">
<section class="lower-footer cf">
<div class="wrap">
<div class="links">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
<p class="copyright"> © 2015-2026 OTUS </p>
<div class="to-top">
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
</div>
</div>
</section>
</footer>
</div> <!-- .main-wrap -->
<div class="mobile-menu-container off-canvas" id="mobile-menu">
<a href="#" class="close"><i class="fa fa-times"></i></a>
<div class="logo">
</div>
<ul class="mobile-menu"></ul>
</div>
<div class="search-modal-wrap">
<div class="search-modal-box" role="dialog" aria-modal="true">
<form method="get" class="search-form" action="https://otus.ru/journal/">
<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />
<button type="submit" class="search-submit visuallyhidden">Submit</button>
<p class="message">
Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel. </p>
</form>
</div>
</div>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/osnovy-raboty-s-svg\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>
</body>
</html>
<!-- Cache served by breeze CACHE - Last modified: Tue, 10 Mar 2026 16:27:03 GMT -->