1763  1

#html[fag] :: как поставить рисунок .svg на сайт?

Нужно начать с того, что файл формата .svg, это обыкновенный текстовый файл, как .txt или .html, например, но, только с описанием свойств и координат кривых векторной графики. Поэтому, с файлами формата .svg мы, в принципе, можем совершать те же действия, что и с перечисленными выше форматами. Но… есть несколько нюансов (если бы их не было, был бы смысл в этой статье?).

#html[fag] :: как поставить рисунок .svg на сайт?

Так вот.

Когда мы создаем файл .svg, в самом начале его кода стоит:

<?xml version="1.0" encoding="UTF-16"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

…а уже сами координаты и свойства кривых записаны в пределах тега <svg>…</svg>. Вот всё, что перед открывающимся тегом <svg> – удаляем, а всё, что находится внутри этого тега, мы копируем и ставим в разметку html своего сайта.

Кроме этого, часто программы, генерирующие .svg файлы, в открывающемся теге <svg> записывают исходные размеры изображения, например: …width="2874px" height="1462px"…, из-за чего размеры изображения не масштабируются. Но… Векторная графика для того и векторная, чтобы одинаково красиво выглядеть при любом растяжении или сжатии, поэтому, вместо конкретных размеров ширины и высоты мы указываем значение этих параметров «auto». Например: …width="auto" height="auto"

Дальше работаем с изображением .svg как c обычным html-элементом.

Если вам понравилась эта статья – комментируйте, делитесь в социальных сетях (кнопки «Поделиться» слева страницы).

Удачи, Мира и Добра!

Если вы уже зарегистрированы на этом сайте, или уже оставляли здесь свои комментарии, отзывы, заявки на участие в акциях, чтобы добавить ещё один комментарий – авторизуйтесь

Добавить комментарий

Комментарии


«ArtInWeb.biz»
  • #12

UA :: У коментарях ви можете щось додати або уточнити, у т.ч. поділитися вашим кодом.


RU :: В комментариях вы можете что-то добавить или уточнить, в т.ч. поделиться вашим кодом.


EN :: In comments you can add or clarify something, including share your code.



© «ArtInWeb.biz» – веб-разработка полного цикла

Последний раз редактировалось: 03/04/2020