Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>Рассказываем, как работать с файлами в формате SVG и для чего их можно модифицировать через код.</strong></p>

2 <h2>Содержание</h2>

3 <ul><li><a>Зачем использовать SVG</a></li>

4 <li><a>Использование SVG: распространенные практики</a></li>

5 <li><a>Интерфейсы и приложения</a></li>

6 <li><a>Использование SVG в формате кода</a></li>

7 <li><a>Как работать с текстом с помощью SVG</a></li>

8 <li><a>Как использовать CSS в SVG</a></li>

9 </ul><h2>Зачем использовать SVG</h2>

10 <p>Если вам нужны четкие, адаптивные или анимированные элементы интерфейса, иконки, логотипы, векторные изображения, то лучше всего использовать формат SVG. Ниже мы расскажем об основных преимуществах формата.</p>

11 <h3>Масштабирование изображения с сохранением качества pixel perfect</h3>

12 <p>При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает ее качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.</p>

13 <p>Изображения в формате SVG сохраняют качество при масштабировании, так как они нарисованы с помощью кода, а не с помощью пикселей.</p>

14 <p><em>Сравнение качества растровых и векторных изображений</em></p>

15 <h3>Возможность модификации</h3>

16 <p>Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.</p>

17 <h3>Небольшой вес файлов</h3>

18 <p>Изображения в формате PNG становятся очень тяжелыми, когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что, в свою очередь, может ухудшить результаты сайта в поисковой выдаче.</p>

19 <p>Файлы в формате JPG чуть легче картинок в PNG, но всё равно они слишком тяжёлые. А изображения SVG представляют собой код, поэтому они весят очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.</p>

20 <h3>Доступность</h3>

21 <p>Если SVG-изображения содержат текст, то поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.</p>

22 <h2>Использование SVG: распространенные практики</h2>

23 <p>Векторные изображения долго были непопулярными, так как не все браузеры их поддерживали, но сейчас эта<a>проблема решена</a>. Поэтому формат активно применяется для решения задач веб-разработки. Наиболее популярные кейсы использования представлены ниже.</p>

24 <h3>Логотипы и иконки в SVG</h3>

25 <p>Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Четкость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.</p>

26 <p>Использование SVG обеспечивает разработчикам контроль над каждой линией, формой и элементом изображения. Также формат облегчает позиционирование элемента и позволяет манипулировать его элементами.</p>

27 <h3>Инфографика</h3>

28 <p>Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG - идеальный вариант для создания интерактивных карт и инфографики.</p>

29 <h3>Визуальные эффекты</h3>

30 <p>С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.</p>

31 <h3>Анимация</h3>

32 <p>SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать<a>дополнительные техники</a>. Также можно воспользоваться SMIL SVG - инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.</p>

33 <h3>Иллюстрации и рисунки</h3>

34 <p>Обычные рисунки и иллюстрации, если они не слишком сложные, легко трансформировать в SVG. Также это практически идеальный формат для скетчей, схем, например, для иллюстраций, схематически показывающих принцип работы какого-то механизма.</p>

35 <h2>Интерфейсы и приложения</h2>

36 <p>SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.</p>

37 <p>Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт с помощью HTML и CSS.</p>

38 <h3>Тег img</h3>

39 <p>Первый способ - URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.</p>

40 <p>Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ - возможность дополнительно использовать тег <a>. С его помощью к изображению можно добавить гиперссылку.</p>

41 <p>Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.</p>

42 <h3>Использование SVG в CSS</h3>

43 <p>Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах.</p>

44 <p>Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.</p>

45 <h3>Инлайн SVG в HTML</h3>

46 <p>Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн.</p>

47 <p>Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах <svg> можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.</p>

48 <h2>Использование SVG в формате кода</h2>

49 <p>В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.</p>

50 <p>Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.</p>

51 <h3>Рисуем с помощью SVG: круг</h3>

52 <p>Чтобы нарисовать круг, необходимо указать три атрибута:</p>

53 <ul><li>Радиус круга - r.</li>

54 <li>Позицию центра круга по оси x - cx.</li>

55 <li>Позицию центра круга по оси y - cy.</li>

56 </ul><p>При этом важно, что цвет линии и фона можно указывать инлайн или отдельно.</p>

57 <p><em>Круг нарисован с использованием SVG-формата</em></p>

58 <h3>Рисуем с помощью SVG: прямоугольник</h3>

59 <p>Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.</p>

60 <p><em>Прямоугольник нарисован с помощью SVG</em></p>

61 <h3>Рисуем с помощью SVG: линия</h3>

62 <p>Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии.</p>

63 <p><em>Прямая линия</em></p>

64 <h3>Рисуем с помощью SVG: звезда</h3>

65 <p>С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры.</p>

66 <p><em>Сложный многоугольник в формате SVG</em></p>

67 <h3>Рисуем с помощью SVG: пути</h3>

68 <p>С помощью элемента можно рисовать ломаные кривые - это позволяет создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m - для относительного. С помощью команды L определяются координаты новой точки.</p>

69 <p>Вот пример использования path:</p>

70 <p>А это пример нескольких линий, созданных с помощью path:</p>

71 <p><em>Пути (path) в SVG</em></p>

72 <h3>Рисуем с помощью SVG: кривые</h3>

73 <p>Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.</p>

74 <p>С помощью команды S можно объединять кривые и создавать сложные формы.</p>

75 <p><em>Кривая линия</em></p>

76 <blockquote><h3>Читайте также</h3>

77 <p><a>Когда роботы заменят верстальщиков на рынке труда</a>: большая обзорная статья о профессии с комментариями экспертов.</p>

78 </blockquote><h2>Как работать с текстом с помощью SVG</h2>

79 <p>Формат SVG позволяет работать с текстом. Для этого применяется тег <text>:</p>

80 <p><em>Обычный текст создан с помощью SVG</em></p>

81 <p>С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.</p>

82 <h3>Как управлять свойствами шрифта с помощью SVG</h3>

83 <p>SVG позволяет управлять следующими свойствами шрифта:</p>

84 <ul><li>font-family</li>

85 <li>font-style</li>

86 <li>font-weight</li>

87 <li>font-variant</li>

88 <li>font-stretch</li>

89 <li>font-size</li>

90 <li>font-size-adjust</li>

91 <li>kerning</li>

92 <li>letter-spacing</li>

93 <li>word-spacing</li>

94 <li>text-decoration</li>

95 </ul><p>С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.</p>

96 <p>Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.</p>

97 <p><em>Перевёрнутый текст</em></p>

98 <p>С помощью <textPath> можно связывать текст с путями. Это делается с помощью атрибута xlink:href:</p>

99 <h2>Как использовать CSS в SVG</h2>

100 <p>Код CSS можно указывать инлайн в коде SVG:</p>

101 <p>Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.</p>

102 <p>В CSS можно работать с таким классом:</p>

103 <p><em>Адаптированный перевод статьи<a>All you need to know about SVG</a>on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением редакции Хекслета.</em></p>