Наследование стилей 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 в Эта статья , Это очень мощный атрибут, который определенно стоит того, чтобы освоить его.

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

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

Похожие

как сделать популярный блог
Что делать, если маршрутизатор не отправляет сигнал Wi-Fi и вы не видите беспроводную сеть
Возникли проблемы с домашней сетью Wi-Fi? Роутер внезапно перестал посылать беспроводной сигнал или сеть просто невидима? Интернет работает после подключения по кабелю, но компьютер не видит сеть Wi-Fi? Вот несколько решений.
Вы уже знаете все о хостинге с SSD дисками?
Выбор хостинга является ключевым вопросом для создания стабильной основы для вашего бизнеса. Если вы просто стоите перед тем, как решить, какой тип хостинга выбрать, прочитайте эту статью. Мы развеем ваши сомнения. В поисках идеального решения для вашего сайта вы столкнулись с такими услугами, как SSD Hosting и Hosting. Если вы не знаете, какой продукт вам следует выбрать, а название мало о чем говорит, стоит углубиться в то, что сервис
Стилизация веб-компонентов с использованием общей таблицы стилей
... ивительная новая функция в Интернете, позволяющая разработчикам определять свои собственные элементы HTML. В сочетании с руководством по стилю веб-компоненты могут создавать API-компоненты, которые позволяют разработчикам прекращать копирование и вставку фрагментов кода и вместо этого просто использовать элемент DOM. Используя теневой DOM, мы можем инкапсулировать веб-компонент и не беспокоиться о войнах специфичности с любой другой таблицей стилей на странице. Тем не менее, веб-компоненты
Как обеспечить безопасность данных в вашей компании?
... вам Делойта, Доступ в интернет уже насчитывает около 25 миллионов человек в Польше, что составляет более половины поляков. Согласно статистике Управления электронных коммуникаций, 9 из 10 поляков пользуются мобильным телефоном, обычно смартфоном. Только 20% интернет-пользователей используют решения, защищающие сеть от хакерских атак. Между тем, согласно данным PAP, 62% польских компаний
Как читать больше и покупать книги дешевле?
Если бы было соревнование в том, кто любит книги больше всего в мире, я бы выиграл золотую медаль (даже если бы она была выдолблена из картофеля и действительно желтой). Я начал читать, когда мне было шесть лет, и с тех пор я не представлял мир без книг. Более того, я думаю, что чтение так сильно меняет людей, что каждый из нас должен читать. Просто как успеть на это и как сделать так, чтобы покупка новинки не повредила в кармане? Я люблю читать, но у меня не всегда есть время для этого.
Спам локальным звонком? Как остановить спуфинг соседей
Подделка соседей - новейшая уловка спам-звонков. Вот как вы можете победить их в своей собственной игре. Как приложения, как RoboKiller становясь все лучше и лучше в борьбе с нежелательным спамом, телемаркетингом и роботизированными звонками, имеет
Самые темные уголки интернета. Вы можете «разрушить чью-то жизнь» или совершить убийство
Социальные сети, видеоканалы, информационные и развлекательные сайты - то, чем является Интернет для большинства из нас - составляют всего 1 процент. сеть. Остальные 99 заняты Deep Web, также известный как темная сторона Интернета. Здесь вы можете найти все , от скучных результатов испытаний после взлома услуги, наркотиков, порнографии ( в том числе ребенок) к оружию.
Nokia позиционирует Lumie 730 и 735 как телефон для селфи. И это не должно
... ите конференцию, где Microsoft показала мир Xbox One? Сразу после нее появились забавные сборники, считающие, сколько раз слово «телевизор» попадало на сцену. После вчерашней конференции Microsoft, который показывает новый Lumie Вы можете сделать подобный сборник, но со словом «селфи».
ДАТАРТ | Частота обновления ТВ: когда вы не знаете, во что верить!
... вляющее большинство производителей сегодня представляют свои воображаемые, вымышленные номера со своими телевизорами вместо реальной частоты обновления. Где это правда, и почему производители указывают значения, которые не соответствуют параметрам оборудования панели?
PhotoRec
PhotoRec, восстановление цифровых изображений и файлов PhotoRec Это программное обеспечение для восстановления файловых данных, предназначенное для восстановления потерянных файлов, включая видео, документы и архивы с жестких дисков, CD-ROM и потерянных изображений (таким образом, имя Photo Recovery) из памяти цифровой камеры. PhotoRec игнорирует файловую систему и работает с исходными

Комментарии

Но если вы не планируете действовать, лучше немедленно закрыть страницу и вернуться к своим занятиям, почему я должен не торопиться, если вы не собираетесь выполнять мой совет?
Но если вы не планируете действовать, лучше немедленно закрыть страницу и вернуться к своим занятиям, почему я должен не торопиться, если вы не собираетесь выполнять мой совет? Позже? Позже или никогда? Сфокусируйся и делай это. ШАГ 1 - СОЗДАТЬ СЕГМЕНТЫ Не смей, пропусти шаг номер один. Без этого все последующие операции не имеют смысла. Ваша работа - думать о том, какого типа, а точнее , с какой целью вы фотографируете . Давайте предположим, что
Не связывайтесь с вашим языком или регионом, если в этом нет необходимости - вы не хотите менять свой компьютер на язык, который вы не понимаете или не получаете обновления из-за рубежа, верно?
Не связывайтесь с вашим языком или регионом, если в этом нет необходимости - вы не хотите менять свой компьютер на язык, который вы не понимаете или не получаете обновления из-за рубежа, верно? Легкость доступа Наконец , функция легкого доступа позволяет настраивать параметры экранной клавиатуры, дикторы, лупы и другие полезные функции навигации Windows.
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете?
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете? Эти инструменты также могут быть особенно полезны, если вы пытаетесь быстро определить, насколько безопасен чужой компьютер. Они могут показать вам, сколько уязвимого программного обеспечения установлено на ПК. Проверьте свой антивирус Нет, мы не собираемся рекомендовать загрузку вируса для проверки вашей антивирусной программы - это путь к катастрофе. Если вы когда-нибудь
Итак, вы купили Планшет Android и не можете понять, как все работает в этой странной новой рабочей среде?
Но как быть уверенным, что ваша защита действительно работает так же хорошо, как вы думаете? Эти инструменты также могут быть особенно полезны, если вы пытаетесь быстро определить, насколько безопасен чужой компьютер. Они могут показать вам, сколько уязвимого программного обеспечения установлено на ПК. Проверьте свой антивирус Нет, мы не собираемся рекомендовать загрузку вируса для проверки вашей антивирусной программы - это путь к катастрофе. Если вы когда-нибудь
Как вы можете остановить подделку соседа навсегда?
Как вы можете остановить подделку соседа навсегда? Соседские поддельные телефонные звонки похожи на волка в овечьей шкуре. Это неприятность в нашей занятой жизни. Но прискорбная реальность такова, что мало практических решений полностью остановит подделку соседей. Одно известное решение для
Если вы адвокат, как вы можете игнорировать такие цифры?
Если вы адвокат, как вы можете игнорировать такие цифры? Создание вашей фирмы на сайтах социальных сетей должно быть главным приоритетом, если вы хотите добиться успеха в будущем. Нечто новое: социальный поиск Одна интересная особенность Facebook, о которой большинство адвокатов не знают, - это Graph Search, который является первым шагом Facebook, ставшим серьезной поисковой системой, которая может когда-нибудь соперничать с Google по мощности и простоте использования.
И почему вы должны быть заинтересованы в контент-маркетинге вообще?
И почему вы должны быть заинтересованы в контент-маркетинге вообще? Ваши клиенты не придают никакого значения вам, вашим продуктам или услугам. Единственное, что их волнует, это их собственные потребности и интересы . Контент-маркетинг - это создание интересной информации, чтобы клиенты, заинтересованные в ней, также обращали внимание на вас и ваши продукты. Программа обучения: 9:30 Открытие регистрации участников
Интернет работает после подключения по кабелю, но компьютер не видит сеть Wi-Fi?
Интернет работает после подключения по кабелю, но компьютер не видит сеть Wi-Fi? Вот несколько решений. Маршрутизаторы могут наносить удары различными способами. Недавно мы написали, что делать, когда
Итак, как вы идете по пути между использованием множества преимуществ Интернета и защитой себя от корпоративных интересов, которые стремятся использовать ваши данные для получения прибыли?
Итак, как вы идете по пути между использованием множества преимуществ Интернета и защитой себя от корпоративных интересов, которые стремятся использовать ваши данные для получения прибыли? Это тот самый толчок, который у меня был с собой за последний год, так как я столкнулся с откровениями, что Cambridge Analytica имеет личные данные более 50 миллионов американцев любезно предоставили Facebook
Вы на медицине, и вы должны теоретически читать в медицинских статьях, и вам нравится романтика?
Вы на медицине, и вы должны теоретически читать в медицинских статьях, и вам нравится романтика? Приходите и идите в библиотеку для хорошего, трогательного дела. Чтение - это удовольствие. Попробуйте применить политику на 50 страниц и не заставляйте себя читать. Если книга после 50 страниц не привлекает вас, уберите ее. Жаль, что книги читаются на прочность. Вместо этого тянуться к чему-то еще. Начните отслеживать, сколько вы читаете.
Почему вы не делаете платную версию?
Почему вы не делаете платную версию? Прежде всего, вы бы заплатили? Во-вторых, было бы обещанием, что мы продолжим развивать программу. Это, однако, не может быть гарантировано, потому что это будет зависеть от суммы собранных средств. Таким образом, мы загнали себя в тупик. Наш совет создателям всех видов - если вы создаете что-то, никогда не делайте это бесплатно, потому что в конце концов все будут сожалеть об этом.

Итак, в чем проблема снова?
Итак, в чем проблема снова?
Так зачем вам устанавливать явные размеры в <svg>, когда вы действительно пытаетесь сделать SVG плавным, верно?
Почему: почему работает вышеуказанная техника?
Роутер внезапно перестал посылать беспроводной сигнал или сеть просто невидима?
Интернет работает после подключения по кабелю, но компьютер не видит сеть Wi-Fi?
Вы уже знаете все о хостинге с SSD дисками?
Просто как успеть на это и как сделать так, чтобы покупка новинки не повредила в кармане?
Спам локальным звонком?
Ите конференцию, где Microsoft показала мир Xbox One?