10 Золоті правила для чуйних SVGS

Sep 11, 2025
Як

Багато переваг SVG - у тому числі нескінченно масштабовані векторні зображення, невеликі розміри файлів та пряма інтеграція з Dom - зробити це природним придатним для Реактивний веб-дизайн . Незважаючи на те, що специфікація SVG - десятиліття, це відносно недавно підтримка у багатьох браузерах та інструментах, що значить, є ще рядки, лазівки та готчасті, які навіть виступають навіть досвідчені веб-дизайнери та розробники.

Тут я підсумував найважливіший з них як 10 золотих правил.

01. Правильно налаштуйте інструменти

Так само, як ремісник загострює свої інструменти перед початком роботи, кожен, хто працює з SVG, повинен встановити свої програми, щоб забезпечити векторний формат доставлення у найбільш ефективному та оптимізованому методі. Для реалізації є ряд налаштувань.

По-перше, якщо немає переконливих причин, щоб зробити інше, встановіть вимірювання до "пікселів" у вашому векторному інструменті. Хоча це не має значення для SVG (який буде виміряти вікно перегляду і елементи щасливо практично у будь-якій системі вимірювання) має сенс розробити SVG креслення за допомогою загальних одиниць CSS, а не друк за умовчанням дюймів; І це також робить набагато легше додати @media запити та інші інтервенції пізніше.

Не робіть зону полотна будь-яким, ніж це потрібно. Як растрові зображення, будь-який "порожній простір" у SVG не буде використовуватися, і найкраще замінено марми CSS. Зверніть увагу, що безліч векторних інструментів, таких як ескіз, автоматично обрізають область полотна до вибраних елементів.

У той же час, не обрізайте зону полотна до точних країв елементів. Антивалізація все одно буде застосовуватися до SVG, а також розрізати його занадто близько, може також вирішити зварення. Замість цього, залиште принаймні 2 пікселів, де буває край полотна наближається до елемента.

Відповідальність та продуктивність тісно пов'язані, тому встановіть десяткову точність, щоб бути не більше двох моментів. SVG не думає в цілих числах, тому векторна точка може мати значення 1.45882721px. Ця екстремальна точність є абсолютно непотрібною, і додає лише до коду та розміру файлу, тому краще скоротити його на цьому етапі.

Аналогічним чином, малювати векторні форми, використовуючи якомога менше пунктів. Багато нових дизайнерів припускають, що більше очок краще, коли реверс насправді є правдою: кілька точок, розміщених добре, забезпечують більший контроль над елементом, а також зменшуючи розмір файлу.

Якщо ви отримуєте векторні файли, які не дотримуються цього правила, не хвилюйтеся - найбільше вектора Програми мають опцію "спрощення", який ви можете використовувати, щоб зменшити кількість точок у елементі, не змінюючи його форми. Крім того, для детальної роботи я пропоную плагін, як Vectorscribe Vectorscribe.

02. Видалити атрибути висоти та ширини

Більшість додатків додають багато власного, непотрібного коду у своєму експорті SVG. Єдиний необхідний код на початку більшості файлів SVG - це наступне: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt; - svg код тут - & gt;
& lt; / svg & gt;

Для наших цілей найважливішим аспектом є видалення ширина і висота Атрибути, які більшість додатків включають автоматично. Це робить SVG повністю чутливим у сучасних браузерах.

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

03. Оптимізація та зниження випуску SVG

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

Поєднання інтелектуального редагування та післяопераційної оптимізації може помітно зменшити розмір файлу SVG

Будь-який інструмент, який ви використовуєте, щоб створити свій вміст SVG, він все ще варто обробляти свій вихід через інструмент, як Svgomg , що помітно обрізає код. Як правило, ви можете заощадити від 20 до 80 відсотків у розмірі файлу. Той самий код можна інтегрувати локально як завдання gulp або grunt .

04. Змінити код для IE

Правило 2 зазначено, що правильно оптимізовані SVGS повністю чутливі до сучасних браузерів. Це правда, якщо підраховувати Microsoft Edge як сучасний браузер. Для IE 9-11 у нас є кілька питань для вирішення. Якщо ми використовуємо SVG як зображення: 

 & lt; img src = "countdown.svg alt =" зворотний відлік "& gt;

Ми можемо змусити IE9-11, щоб відобразити зображення правильно за допомогою селектора атрибутів CSS: 

 IMG [SRC $ = ". SVG"] {Ширина: 100%;}

Зображення SVG добре працюють у загальному виробництві, але мають обмежену інтерактивність: більшість браузерів буде ігнорувати інтерактивність та анімацію всередині SVG, розміщеного на сторінці як . Крім того, зображення SVG є додатковим HTTP-запитом для браузера.

Для цих та інших причин, SVG все частіше використовується. У цьому випадку код SVG потребує трохи більше лікування для IE: 

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" CarraneAspectratio = "скибочка xmidymin" & gt;

На додаток до консервованість атрибут, тобто потребує трохи більше керівництва, щоб зберегти правильне масштабування зображення: візьміть ширину SVG ( 365 У цьому випадку), розділіть його висотою ( 525 ) і помножте результат на 100 відсотків. Це стане підкладка Значення для SVG, "Підпилювання" він відкривається досить в IE, щоб відобразити SVG у своєму правильному співвідношенні сторінки: 

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
CarraneAspectratio = "xmidymin slice"
Стиль = "Ширина: 100%; підкладка-дна: 69,52%; висота: 1px; переповнення: видимий" & gt;

Зверніть увагу, що для того, щоб тримати речі стислими та зрозумілими, зразки коду в іншій частині цієї статті не включають ці зміни. Amelia Bellamy-Royds написав Відмінна стаття про масштабування SVG .

05. Розглянемо SVG для тексту героя

Using SVG for hero text means it will automatically scale in line with its container

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

Наразі немає стандарту CSS для розміру тексту до його контейнера. Можна масштабувати текст за допомогою VW одиниць, але це майже завжди вимагатиме принаймні двох медіа-запитів, щоб "затискати" текст у певних межах перегляду. Однак, текст SVG буде змінювати розмір контейнера автоматично: 

 & lt; заголовок & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; текст x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / заголовок & gt;

CSS: 

 Заголовок SVG Текст {
маса шрифту: 900; шрифт: 90px; Заповніть: синій;
}

Зберігання доступу до SVG зберігає доступ до доступу та SEO, і дозволяє текст бути стильним, використовуючи будь-який шрифт, який вже вбудований на сторінку. Подивитися тут для отримання додаткової інформації.

06. Залиште ширину і висоту на місці для прогресивних значків

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

До цього мовного бульбашки було застосовано лінію, що не масштабується, тому вона не зміниться шириною, коли ви можете змінити вигляд

Одним з виняток для правил 2 - це значки та невеликі логотипи, які повинні зберігати їх ширина і висота Атрибути, якщо ви хочете, щоб вони були поступово покращені: 

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg рол = "img" aria-label = "Codepen" ширина = "50" висота = "50" & gt;
        & lt; назва & gt; codepen & lt; / title & gt;
        & lt; використовувати xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "дисплей: немає;" & gt;
    & lt; символ ID = "Codepen" Viewbox = "0 0 50 50" & GT;
        & lt; шлях d = "..." / & gt;
    & lt; / символ & gt;
& lt; / svg & gt;

Ви можете побачити приклад цієї техніки в дії тут .

Якщо ми розміром лише значків SVG з CSS, а аркуш стилю сайту не завантажується, значки з'являться за розміром за замовчуванням заміненого елемента: 300px x 150PX. Зберігаючи висоту та ширину, як атрибути, ми можемо розмістити їх до найближчого обґрунтованого сенсорного розміру за замовчуванням, а також використовувати наші CSS, щоб покращити спосіб, яким вони представлені.

07. Використовуйте векторні ефекти, щоб утримувати ліки

За замовчуванням SVG максимально володіє Viewport, включаючи товщину інсульту. Зазвичай це добре працює, але в деяких випадках - діаграми та штрихи, що застосовуються як ефекти назовні тексту, зокрема, ви захочете зберегти штрихи таку ж товщину, незалежно від того, який розмір малюнка. Це область маловідомий вектора властивість, яку можна застосувати як атрибут презентації або в CSS: 

 Шлях {
    Заповніть: #fff; Інсульт: # 111;
    Ширина інсульту: 2;
    Векторний ефект: немашиновий інсульт;
}

Подивись на Повний приклад цієї техніки .

08. Пам'ятайте растрові

Багато розробників вважають, що SVG можуть використовувати лише вектори, але JPEG та PNGS також можуть бути застосовані до креслення SVG. І поки що ви дотримуєтеся моїх правил, ці зображення будуть чутливі, коли ви додаєте растрову карту через Тег: 

 & lt; Ширина зображення = "1024" висота = "768" xlink: href = "озеро-louise.jpg" x = "1300" y = "150" роль = "зображення" title = "crowswest pass" & gt; & lt; / image & gt;

09. Розглянемо адаптивні рішення

The classic Coca-Cola logo rendered at different adaptive sizes

Класичний логотип Coca-Cola, наданий різним адаптивним розмірам

Зробити речі "Skish" - це лише одна частина реабівного дизайну. Що таке RWD, у більшій сенсі адаптивного дизайну, представляє відповідний вміст у всіх розмірах перегляду.

Це можна досягти різними способами. Responsivelogos.co.uk надає ряд прикладів, які використовують SVG Sprites, але я вважаю за краще інтегрувати Media Queries у SVG, щоб створити те, що я називаю "брендинговими модулями". Цей підхід дозволяє мені додавати, видалити та змінювати видимість компонентів. Дізнайтеся більше про адаптивні модулі брендингу У моїй статті .

Ця ж методика може бути використана для діаграм, ілюстрацій, картів тощо. У найпростіших модулях сам CSS може бути написаний всередині SVG, що робить його корисним скрізь, як зазначено у попередньому правилі.

10. Інтегрування засобів масової інформації в SVG

Багато людей не знають, що CSS Media Queries можуть бути написані всередині самого SVG: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; стиль & gt;
SVG G {Перехід: 1S; }
@Media все і (Max-ширина: 90rem) {
#drink, #coke {непрозорість: 0; }
}
& lt; / стиль & gt;
& lt; / defs & gt;
& lt; g id = "Coca-Cola" & GT;
& lt; шлях d = "m109.6 ... & gt;

Важливо відзначити, що медіа-запит може лише "бачити" елемент, який він знаходиться всередині: тобто будь-яке вимірювання стосується самого елемента, а не сторінки. Одним з потенційного недоліку цього підходу полягає в тому, що площа полотна SVG завжди залишатиметься незмінною, відносно елементів всередині нього.

Це може призвести до дуже дрібних елементів у невеликих розмірах перегляду, обрамлені всередині відносно великого району полотна. Є кілька рішень для цього, в тому числі Зміна розміру вікна перегляду і розширюючи елементи для компенсації .

Висновок

Нескінченна масштабованість СВГ є його найбільшим активом, але функція, яка все ще дещо недостатньована за допомогою браузерів та векторних графічних редакторів. Інтегруючи ці керівні принципи у ваш виробничий робочий процес та спілкування їх іншим у вашій команді, ви можете створити плавно реагувати SVG для Інтернету, що робить його частиною активів, які ви використовуєте у розробці щодня.

Ця стаття спочатку з'явилася чистий журнал випуск 283; купити його тут !

Пов'язані статті:

  • 12 необхідних інструментів тестування коду
  • Заточити навички ескізів
  • Навантажувач SVG анімації з GSAP

Як - Найпопулярніші статті

Як редагувати відео на Tiktok

Як Sep 11, 2025

(Зображення кредиту: Mabel Wynne) Навчання, як редагувати відео на Tiktok..

Affinity Designer: Як використовувати ефекти та стилі

Як Sep 11, 2025

(Кредит зображення: Serif) З векторними та растровими інструментам..

10 способів створення кращого характеру анімації

Як Sep 11, 2025

З розміром 3D-індустрії росту в рік, це важливіше, ніж коли-небудь, щоб переконатися, що ваша робота виділя..

17 способів малювати кращі істоти

Як Sep 11, 2025

Коли ви малюєте істот, це важливо, щоб вони вважають. Незалежно від тог�..

5 Поради щодо покращення творів VR

Як Sep 11, 2025

Вершина майстерня лідера Глен Південний поділяє..

Як додати текстуру до пастелів з праймерами

Як Sep 11, 2025

За допомогою Пастельні праймери Для створення поверхонь для в..

Перетворіть свої 2D-конструкції в 3D з проектом Felix

Як Sep 11, 2025

Нещодавній попередній випуск нової Adobe Felix 3D пакет робить це чудовим часом, щоб взяти стрибок від..

Як назвати агентство веб-дизайну

Як Sep 11, 2025

Отримання правильної назви вашого агентства нелегко; Багато людей пот..

Категорії