Встановити SGV іконки

У сучасній розробці веб-сайтів не обійтися без встановлення масштабованої векторної графіки - SVG (Scalable Vector Graphics), і для цього є кілька способів встановлення SVG іконки зі своїми плюсами та мінусами.

Наприклад візьмемо SVG іконку myicon.svg, яку додаватимемо на нашу сторінку.

Встановлення SVG як графічний файл

Тут все просто, іконка ставиться як звичайна картинка в тег img з на svg файл, обов'язково потрібно вказати параметри ширини і висоти:

Установка SVG графіки в HTML

Вставляємо SVG код безпосередньо в потрібне місце HTML, недолік в тому, що якщо картинок багато, у нас вийде надмірність однакового коду:

Встановлення SVG через CSS

Робимо графіку SVG фоновим зображенням для зазначеного елемента. Для цього переводимо SVG код у CSS формат конвертером:

Установка SVG через JS

Створюємо JavaScript змінну зі значенням коду іконки, а далі використовуємо її в потрібному елементі:

Далі повторюємо вище вказаний варіант із CSS, вставляючи потрібну іконку куди завгодно.

Можна JS код зробити на jQuery: