1 Можна міняти колір, розмір, вирівнювання та інше стилі звичайного тексту
2 Стилі повинні бути прописані або в самому SVG файлі, або підключені зовнішнім стилем в SVG на початку файлу:
По правді кажучи стилі прописані всередині SVG так само працюватимуть і при використанні тега IMG або background-image, але в цьому немає ніякого сенсу.
іконочние шрифт
Плюси і мінуси такого підходу:
+ іконка поводиться як символ шрифту, і всі параметри налаштовуються так само через CSS (розмір, колір, вирівнювання та інше);
+ єдиний спосіб працює в IE 8 без додаткових маніпуляцій;
- всі елементи SVG файлу об'єднуються в один символ, тому керувати ним за допомогою CSS або JS можна тільки як єдиним цілим;
- підтримуються тільки одноколірні іконки;
- при збої завантаження шрифту у користувача або не зображені ікони зовсім, або, при збігу кодів іконок з символами юнікода, відобразяться відпо символи.
SVG як OBJECT
На жаль (чи на щастя) codepen і jsfiddle блокують завантаження зовнішніх object з метою безпеки.
Вбудовування виглядає наступним чином:
Об'єкт вбудовує елмемент атрибута data зразок iframe, додаючи всередину себе розмітку підключається файлу, тому до елементів можна звертатися за допомогою JS, але не зовсім звичайним чином:
Варто зазначити що в CSS стилі для SVG елементів відрізняються від стандартних, повний список стилів підтримуваних SVG можна подивитися тут.
SVG поводиться не як звичайне зображення, його не можна непропорційно трансформувати, задаючи ширину і висоту. Об'єкт всередині буде займати максимальну площу і центрироваться в контейнері:
Але об'єкт можна трансформувати використовуючи CSS наприклад так:
IE 8 і нижче не підтримують SVG від слова «зовсім» тому, якщо серед користувачів вашого сайту є ця специфічна аудиторія варто потурбуватися перевіркою і заміною svg на растрове зображення. Зробити це можна безліччю способів, наприклад використовуючи Modernizr додавати .no-svg клас для body:
Плюси і мінуси такого підходу:
+ можна використовувати зовнішній CSS файл для управління стилями;
+ підтримуються SVG анімації і фільтри;
+ підтримуються інтерактивні анімації;
- для IE 8 і нижче необхідна заміна на растрове зображення.
SVG в IMG або background-image
Обидва способи вбудовування чимось схожі на вбудовування за допомогою тега object, наприклад не можна міняти пропорції зміною ширини і висоти контейнера, але мають більше обмежень.
Підключаються в SVG зовнішні стилі не будуть працювати, звернутися до елементів через JS так само не вийде. Інтерактивні анімації в SVG теж не спрацюють. А проблеми з IE 8 і нижче так само залишаються.
Але SVG анімації будуть працювати, в обох випадках.
У випадку з IMG втраіваніе виглядає як звичайна картинка:
У випадку з background-image як звичайний блок:
Так само за допомогою background-image можна використовувати спрайт, як з png зображеннями, а міняти розмір можна за допомогою background-size:
З огляду на що відсоток людей c екранами device-pixel-ratio яких вище 1 і їх пристрої не підтримують svg прагне до нуля (якщо такі взагалі є), то можна використовувати медіа вираження для підключення svg, тільки для них, а для інших використовувати png версію:
Плюси і мінуси цих підходів:
+ підтримуються SVG анімації і фільтри;
+ у випадку з background-image можна використовувати SVG спрайт;
- не можна міняти властивості елементів SVG через CSS або JS;
- не підтримуються інтерактивні анімації;
- для IE 8 і нижче необхідна заміна на растрове зображення.
Inline SVG
У цьому варіанті SVG код, отримати який можна відкривши будь-який SVG файл текстовим документом, вбудовується безпосередньо в код сторінки.
Безсумнівно така конструкція погіршує читаність коду, і збільшує його обсяг, але відкриваються нові можливості.
Наприклад маючи набір іконок в SVG файлі, можна використовувати їх повторно простою конструкцією виду:
де some_svg_element_id id елемента всередині вихідного SVG файлу.
До окремо взятому елементу можна, наприклад, застосовувати SVG трансформації:
Плюси і мінуси цього підходу:
+ ніякої подгрузки зовнішніх файлів;
+ доступні маніпуляції з елементами SVG через CSS і JS;
+ підтримуються SVG анімації і фільтри;
+ підтримуються інтерактивні анімації;
+ можливість повторного використання елементів;
- забруднюється код сторінки;
- для IE 8 і нижче необхідна додаткова розмітка, і заміна на растрове зображення.