Як зробити SVG адаптивним за допомогою CSS
SVG може бути вбудований у веб-сторінку безліччю способів; один з них - використання HTML5 тега. Інші способи включають вбудовування SVG за допомогою тегів.
У випадку з Internet Explorer виникає та сама проблема, про яку ми згадували раніше, коли висота SVG за умовчанням дорівнює 150px. Проблема також усувається шляхом завдання ширини 100%:
Вбудовування SVG за допомогою
дуже схожий за своїм функціонуванням та особливостями на .
Однак браузери реагують на цей спосіб по-різному. На сьогоднішній день Chrome, Firefox та Internet Explorer виставляють вставленому в iframe SVG: 300px ширини та 150px висоти. У попередніх випадках, коли IE використовував стандартну висоту 150px, він використовував ширину 100%. Однак коли йдеться про iframe всі три браузери встановлюють висоту та ширину iframe'а у фіксованому розмірі 300px на 150px.
Застосування width:100% розтягує iframe для заповнення ширини контейнера, проте висота не змінюється - вона як і дорівнює 150px; навіть коли контейнер і iframe зменшуються до ширини меншої, ніж оригінальна ширина SVG, iframe, як і раніше, підтримує висотку в 150рх,приводячи до появи білих пробілів зверху і знизу SVG-зображення. Це відбувається у всіх трьох браузерах.
Ідея padding hack'а полягає у використанні відношення внутрішніх відступів елемента до його ширини. Коли внутрішні відступи встановлені увідсотковому співвідношенні, відсотки обчислюються щодо ширини елемента, навіть якщо ми виставили тільки верхній внутрішній відступ. Аналогічний прийом можна використовувати у випадку з SVG, щоб зробити елемент гумовим. Нижче описано кроки для досягнення потрібного нам ефекту.
Нехай тестовий SVG виглядає так:
Padding hack – Крок 1
Длящоб зробити SVG адаптивним, коли він вбудований в iframe необхідно зробити те саме, що ми робили раніше: прибрати атрибути height і width з елемента.
Padding hack – Крок 2
Далі переконаємося в тому, що задали атрибут viewBox. Найчастіше SVG матиме вказаний viewBox.
Немає необхідності спеціально задавайтеpreserveAspectRatio так як його стандартне значення (xMidYMid meet ) є значенням, яке нам цілком підходить. Тому немає необхідності задавити його, якщо значенняpreserveAspectRatio не повинно бути особистим від стандартного.
Padding hack – Крок 3
Щоб padding hack спрацював, SVG необхідно помістити в контейнер. Для цього нам підійде елемент div. Цей контейнер отримає внутрішнє співвідношення за допомогою padding hack'а (наступний крок), а потім iframe буде автоматично масштабований всередині контейнера.
Padding hack – Крок 4
Далі, ми застосовуємо кілька стилів до контейнера, дотримуючись наступних правил:
Отже, що конкретно роблять вищезазначені правила?
По-перше, ми скидаємо значення висоти контейнера. Так як внутрішні відступи розраховуються щодо ширини елемента, нам знадобиться задати їх щодо елемента для його повторного розширення по вертикалі.
Після того, як ми вказали ширину контейнера – яка повинна автоматично розтягуватись, використовуючи відсоткове значення, задаємо значення верхнього внутрішнього (або нижнього) відступу контейнера за допомогою наступної формули. Ця формула використовує значення атрибутів height і width, які ми прибрали в Кроку 1) для вказівки значення заповнення, яке дозволить внутрішньому відступу контейнера відповідати розмірам svg.
У нашому логотипі ширина svg складає 194px, ависота - 186рх. Я встановив ширину контейнера на 50%, щоб він займав половину доступного горизонтального простору. Застосоване до контейнера заповнення дорівнює(186/194) * 50 = 48%. Тобто код для контейнера виглядає ось так:
Так як висота контейнера була збита і ми виставили велике значення верхньому внутрішньому відступу, то вміст буде зміщено вниз.
Щоб витягнути SVG назад ми розмістимо iframe всередині контейнера. Тут входить у гру position: relative, що допомагає виставити правильну позицію для SVG.
Padding hack – Крок 5
Тепер, коли у нас є контекст, розташуємо iframe всередині контейнера і виставимо його розміри таким чином, щоб вони збігалися з висотою і шириною контейнера:
Це все, що потрібно для того, щоб зробити SVG адаптивним. iframe відображається в стандартній рамці, якої, мабуть, ви захочете позбутися. Для цього достатньо додати правило: border: none;
Вбудовування SVG за допомогою Вбудовування SVG за допомогою
SVG може бути вбудований в HTML документ за допомогою тега.
У Chrome і Firefox висота SVG розраховується саме так, як нам потрібно. І тут адаптивність досягається без особливих втрат.
В Internet Explorer (перевірено на версіях 9 та 11) висота знову дорівнює 150рх, а ширина 100%. Як і в попередніх випадках, при зміні розміру екрана, зверху та знизу SVG з'явиться білий простір. При використанні img було достатньо вказати width: 100%; однак, виставивши ширину в 100% самому svg, такий самий ефект не буде досягнутий. В цьому випадку найкращим рішенням буде застосування padding hack-а.
SVG вбудований як фоновий малюнок за допомогою CSS
Одним із популярних способів вбудовування SVG є використання фоновогомалюнку:
На щастя, нам не потрібно застосовувати жодні фікси або хакі, щоб змусити фоновий малюнок SVG поводитися як необхідно - фоновий малюнок SVG може бути розташований, накладений, змінений у розмірі і масштабований як будь-який фоновий малюнок.
Робимо SVG адаптивними за допомогою CSS медіа запитів
Той факт, що графічні елементи в SVG створюються за допомогою XML, робить роботу з SVG дуже зручною. Так як SVG-контент складається з XML тегів, які відображають графіку, ми можемо вибирати окремі елементи і застосовувати до них конкретні стилі так само, як ми вибираємо елементи HTML, використовуючи CSS селектори.
Елементи SVG зазвичай стилізуються за допомогою презентаційних атрибутів на зразок fill, stroke, transform та інших. Однак лише підмножина всіх презентаційних атрибутів може бути задана за допомогою CSS. Ви можете знайти список стилів, що задаються, у специфікації стилів SVG. Список заданих за допомогою властивостей CSS атрибутів на даний момент не включає атрибути x, y, width і height; Однак ця четвірка буде додана до списку, і ми зможемо задавати їх за допомогою CSS.
Деякі з найчастіших властивостей: fill, який працює подібно до фонового кольору; stroke, який схожий на border; opacity, display, transform та деякі інші.
Далі ми додамо медіа запити всередину тега
Ось так вставляємо логотип:
У кожного з елементів у SVG є ID, який ми можемо використовувати в CSS:
Зміна логотипу залежно від розмірів екрану – також адаптивність. Деякі логотипи компаній можуть займати занадто багато простору на маленьких екранах, тому ми все частіше бачимо, як багато логотипів адаптуються шляхом позбавлення від текстової частини. Без SVG цього можна було б досягти шляхом перемиканняPNG на екранах різних розмірів. Однак такий підхід не дуже ефективний, адже вам потрібно зберігати на сервері безліч картинок. В даному випадку явно видно переваги SVG: гнучкість у використанні та чудове відображення на екранах.
На завершення
З виходом нових і нових версій Chrome і Firefox збільшується підтримка SVG, тому інформація в цій статті в якийсь момент може стати не актуальною. Internet Explorer як завжди уповільнює всю движуху, тому згадані фікси будуть актуальні довгий час.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ Переклав: Станіслав Протасевич Урок створено: 9 Вересня 2014 Переглядів: 46088 Правила передруку
5 останніх уроків рубрики "CSS"
Смішні ефекти для літер
Невеликий ефект з інтерактивною анімацією букв.
Реалізація кумедних підказок
Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.
Анімовані літери
Експеримент: анімовані букви SVG на базі бібліотеки anime.js.
Сонцезахисні окуляри від першої особи
Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Навігація, що розкривається
Експериментальний скрипт навігації, що розкривається.