Наследование стилей SVG и «Flash of Unstyled SVG» - Сара Соуэйдан - внештатный пользовательский интерфейс UX / UX Developer

  1. Итак, в чем проблема снова?
  2. Но SVG должны быть отзывчивыми ...
  3. Как
  4. 1. Сохраняйте атрибуты ширины и высоты
  5. 2. Укажите желаемые значения ширины и высоты в CSS
  6. Почему: почему работает вышеуказанная техника?
  7. Совет: Вы можете использовать атрибуты презентации, чтобы обеспечить запасной вариант для масштабирования,...
  8. Странный SVG масштабирование Гочас, чтобы быть в курсе
  9. Совет по масштабированию: никогда не бросайте viewBox
  10. Завершение
  11. Дальнейшее чтение

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

Я написал и немного рассказал о стилизации и анимации SVG с помощью CSS, и включил список ресурсов, чтобы погрузиться в детали в конце статьи. Я также затронул тему наследования стилей и CSS Cascade в SVG как в устной, так и в письменной форме. Тем не менее, тема стоит свой блог.

Я собирался написать эту статью некоторое время, но был занят этим. Но то, что побудило меня наконец написать это сегодня, это твит, который я видел вчера:

Проблема: негабаритные значки SVG, когда CSS страницы не загружается https://t.co/FwkaBAzrAT

- Веб-платформа ежедневно (@openwebdaily) 29 февраля 2016 г.

И я вспомнил, что я уже упоминал причину и решение этой проблемы в одном из своих выступлений, а также в главе Smashing Book 5 о SVG, но никогда в одной из моих статей, даже в статье, посвященной тому, чтобы SVG реагировали на CSS. (Смотрите ссылки внизу статьи.)

Итак, в чем проблема снова?

Когда CSS отключен или не загружается по какой-либо причине - например, когда вы используете lo-fi, большинство SVG-изображений, особенно встроенных, будут масштабироваться и занимать всю ширину области просмотра, таким образом, стилевая страница будет выглядеть еще больше ' сломано ", чем это уже делает.

Я сталкивался с этой проблемой масштабирования довольно много раз в прошлом, когда я посещал Codepen на моем довольно медленном соединении (которое иногда становится не просто «довольно медленным»). Адаптивный логотип Codepen будет занимать всю область видового экрана, таким образом блокируя содержимое под ним и заставляя вас прокручивать страницу вниз, чтобы прочитать то, что следует за ним.

Это - позвольте мне это назвать - Flash of Unstyled SVGs (FOUSVG) вызван отсутствием атрибутов width и height в элементе <svg>.

Но SVG должны быть отзывчивыми ...

Так зачем вам устанавливать явные размеры в <svg>, когда вы действительно пытаетесь сделать SVG плавным, верно?

Правильно.

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

Используя преимущества дерева наследования стилей SVG , мы можем сделать наши SVG отзывчивыми, одновременно планируя наихудшие сценарии и обеспечивая достойный, менее разрушенный запасной вариант.

Как

Чтобы избежать проблемы масштабирования без CSS, все, что вам нужно сделать, это не удалять атрибуты width и height из SVG.

1. Сохраняйте атрибуты ширины и высоты

Это означает, что, если вы сами создаете SVG, например, в Adobe Illustrator, вам следует избегать выбора опции «Отзывчивый» на панели (панелях) экспорта .

Это означает, что, если вы сами создаете SVG, например, в Adobe Illustrator, вам следует избегать выбора опции «Отзывчивый» на панели (панелях) экспорта

Параметр «Отзывчивый» на новой панели «Параметры экспорта SVG» в Illustrator. Параметр «Отзывчивый» на новой панели «Параметры экспорта SVG» в Illustrator Параметр «Отзывчивый» на старой панели параметров экспорта SVG Illustrator.

Очень заманчиво проверить эту опцию, потому что вы хотите, чтобы ваши SVG были отзывчивыми, в конце концов, но вы не должны проверять это, если вам не нужно, чтобы SVG просто занимал всю ширину на экране - например, когда это предполагается быть шириной области просмотра, например. (Я включил SVG в свой текущий клиентский проект и хотел, чтобы он занимал всю ширину страницы, поэтому я благополучно удалил атрибуты.)

Если снять флажок «Отзывчивый», Illustrator будет экспортировать SVG-файл и сохранит его размеры.

2. Укажите желаемые значения ширины и высоты в CSS

Вы хотите, чтобы ваш SVG масштабировался, был жидким и заполнял ширину контейнера?

Нет проблем. Скажите браузеру, что хотите, чтобы это произошло, указав размеры, указанные в атрибутах выше, используя свойства CSS:

svg {ширина: 100%; высота: 100%; }

или может быть что-то вроде

svg {ширина: 1em; высота: 1em; / * возможно даже ... * / color: currentColor; }

который ограничит размеры значка SVG, например, и масштабирует его пропорционально тексту, с которым он встроен.

Если вы укажете желаемую ширину и высоту в CSS, атрибуты ширины и высоты больше не будут ограничивать размеры SVG, когда CSS успешно загружен и применен.

Если CSS не загружается, браузер будет использовать значения, предоставленные в атрибутах, в качестве запасного варианта, тем самым предотвращая чрезмерное масштабирование SVG.

Почему: почему работает вышеуказанная техника?

Атрибуты представления SVG - это специальные свойства стиля - сокращение для установки свойства CSS на узле SVG. По этой причине имеет смысл только то, что атрибуты представления SVG будут способствовать каскаду стилей.

Когда я начал работать с SVG, я ожидал, что атрибуты представления будут более конкретными, чем любое другое объявление стиля. Мне показалось, что чем «ближе» стиль к узлу, тем он более конкретен. Например, встроенные <style> более специфичны, чем внешние стили, встроенный атрибут стиля более специфичен, чем <style> 'Islands', поэтому я подумал, что имеет смысл использовать атрибуты представления как наиболее специфическую форму стилей. Но я был неправ.

Так же, как атрибуты представления HTML Атрибуты SVG считаются низкоуровневыми авторскими таблицами стилей и переопределяются любыми другими определениями стилей: внешними таблицами стилей, таблицами стилей документа и встроенными стилями.

Это позволяет обеспечить запасной вариант, когда стили CSS недоступны, поэтому SVG по-прежнему хорошо выглядят в «худшем» случае.

Порядок стилей в каскаде. Стили ниже на диаграмме переопределяют стили над ними. Стили атрибутов представления переопределяются всеми другими стилями, кроме тех, которые относятся к пользовательскому агенту.

Совет: Вы можете использовать атрибуты презентации, чтобы обеспечить запасной вариант для масштабирования, превышающего SVG

Если у вас есть SVG, который вы стилизируете и анимируете, используя свойства CSS, вы можете начать с полного исключения атрибутов презентации - у нас есть возможность сделать это на панели «Экспорт» Illustrator, выбрав «Свойства CSS» вместо «Атрибуты презентации». Это приведет к тому, что все атрибуты будут экспортированы как свойства CSS, если они могут быть установлены как свойства CSS.

Видите ли, только подмножество всех свойств CSS может быть установлено атрибутами SVG, и наоборот. В спецификации SVG перечислены Атрибуты SVG, которые могут быть установлены как свойства CSS , Некоторые из этих атрибутов используются совместно с CSS, например, такие как непрозрачность и трансформация, а некоторые нет, такие как заливка, обводка и ширина обводки.

В SVG 2 этот список будет включать x, y, width, height, cx, cy и некоторые другие атрибуты представления, которые невозможно было установить с помощью CSS в SVG 1.1. Новый список атрибутов можно найти в спецификации SVG 2 ,

Некоторые из «новых» CSS-свойств для SVG уже реализованы и доступны в Chrome!

Есть преимущество в том, что атрибуты представления также хранятся внутри SVG, а не только в корневом элементе. Эти преимущества наиболее заметны при попытке стилизовать содержимое элементов <use> d в SVG.

Когда вы повторно используете элемент, содержимое этого элемента копируется, как есть, туда, куда вы помещаете <use> на странице. Но вы, возможно, захотите повторно использовать элемент Mutliple раз и стилизовать каждый случай по-разному. Вы можете сделать это, используя пользовательские свойства CSS (или CSS-переменные).

При «объединении в тематику» нескольких элементов <use> с пользовательскими свойствами CSS рекомендуется всегда сохранять атрибуты представления, которые предоставляют стили по умолчанию для повторно используемого SVG, чтобы стиль стилизовался как при сбое загрузки CSS, так и / или когда SVG просматривается в браузерах, которые еще не поддерживают пользовательские свойства. Без атрибутов представления большинство стилей, таких как заливка и обводка, по умолчанию будут черными, что, вероятно, не то, что вам нужно.

Странный SVG масштабирование Гочас, чтобы быть в курсе

В зависимости от того, как вы встраиваете SVG , браузеры по умолчанию будут иметь размер 300 на 150 пикселей, то есть размер по умолчанию для замененных элементов в CSS , Например, это размер по умолчанию, который вы получаете для <iframe>.

Если размеры SVG не указаны или для них явно задано значение auto, браузеры по умолчанию установят размер 300 на 150 пикселей. Если для любого измерения установлено значение auto (вместо 100%, как было упомянуто ранее), браузер отменит значение, установленное в атрибутах презентации, и по умолчанию установит одно из значений высоты и ширины по умолчанию.

Ну вроде ..

Опять же, это зависит ™.

Видите ли, поведение браузера зависит от того, как вы встраиваете SVG. Если вы встраиваете SVG с использованием <iframe>, вы получаете 300x150 по умолчанию. Если вы встраиваете SVG-документ в документ (используя <svg>), большинство браузеров масштабируют его до ширины контейнера и пропорционально масштабируют высоту, чтобы сохранить соотношение сторон SVG, а Internet Explorer будет масштабировать ширину, но не высота , так что вам нужно явно указать это для масштабирования высоты.

Интересный факт: IE будет масштабировать высоту SVG, если вы дадите ей явное значение ширины 100%. Сумасшедший, но правда.

Я написал больше о рендеринге различных методов встраивания SVG в статье «Создание SVG-адаптивных с CSS», приведенной в нижней части статьи, а также о способах обеспечения того, чтобы SVG «реагировал» во всех браузерах.

Амелия Беллами-Ройдс также подробно рассказала о методах масштабирования браузера в своей статье «Как масштабировать SVG» на CSS-хитрости.

Совет по масштабированию: никогда не бросайте viewBox

Когда-либо.

Это, возможно, самая важная вещь, о которой вам нужно знать при попытке масштабирования SVG: вам нужен SVG viewBox для правильного масштабирования SVG-изображений.

Не удаляйте это.

После прочтения этой статьи, разработчик Дэвид Бушелл поделился своим собственным опытом, подчеркнув важность viewBox, чтобы убедиться, что изображения SVG отображаются правильно. Вы можете проверить его пост Вот ,

Завершение

Наличие явных, непроцентных значений ширины и высоты, установленных в SVG, не только помогает исправлять проблемы FOUSVG, но также помогает решать другие проблемы с масштабированием, особенно когда SVG используется в качестве фонового изображения в CSS. Internet Explorer иногда отказывается правильно масштабировать изображение, если для него не указано соотношение сторон, указанное в атрибутах width и height. У меня было такое даже недавно с фоновыми изображениями. Честно говоря, я не знаю деталей, почему или когда именно это происходит, но я знаю, что мы можем избежать этого, если эти атрибуты будут доступны в любом случае.

ViewBox даже важнее ширины и высоты, поэтому всегда держите его там. Вы можете узнать все, что нужно знать о том, как работает viewBox в Эта статья , Это очень мощный атрибут, который определенно стоит того, чтобы освоить его.

Дальнейшее чтение

Я надеюсь, что вы нашли эту статью полезной. Спасибо за чтение!

Итак, в чем проблема снова?
Итак, в чем проблема снова?
Так зачем вам устанавливать явные размеры в <svg>, когда вы действительно пытаетесь сделать SVG плавным, верно?
Почему: почему работает вышеуказанная техника?