1655  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-елементом.

Якщо вам сподобалася ця стаття – коментуйте, діліться в соціальних мережах (кнопки «Поділитися» ліворуч сторінки).

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

Переклад Ігор КРУК

Ігор КРУК

переклад з російської

Створення landing page, сайтів-візиток, корпоративних сайтів, веб-порталів та інтернет-магазинів на різних платформах у розумні строки і…
за розумні гроші.

Якщо ви вже зареєстровані на цьому сайті, або вже залишали тут свої коментарі, відгуки, заявки на участь в акціях, щоб додати ще один коментар – авторизуйтесь

Додати коментар

Коментарі


«ArtInWeb.biz»
  • #12

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


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


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



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

В останнє редагувалось: 03/04/2020