Многие преимущества SVG - в том числе бесконечно масштабируемых векторных изображений, небольшие размеры файлов и прямой интеграции с DOM - сделать его естественным пригодным для
Отзывчивый веб-дизайн
Отказ Несмотря на то, что спецификация SVG представляет собой десятилетие старое, это относительно недавняя поддержка во многих браузерах и инструментах означает, что все еще есть ряд трюков, лазейки и голча, которые уложит даже опытные веб-дизайнеры и разработчики.
Здесь я кратко известел наиболее важные из них как 10 золотых правил.
01. Настройте свои инструменты правильно
Точно так же, как ремесленник остроет свои инструменты перед началом работы, любой, кто работает с SVG, должен установить свои приложения, чтобы доставлять векторный формат в наиболее эффективном и оптимизированном способе. Существует ряд настроек для реализации.
Во-первых, если нет убедительных причин для выполнения иначе, установите измерения на «пиксели» в вашем векторе. В то время как это не имеет значения для SVG (что будет измерять
Viewbox
и элементы радостно практически практически в любой системе измерений) имеет смысл разрабатывать чертеж SVG с использованием общих единиц CSS, а не на печати по умолчанию дюймов; и это также облегчает добавление
@средства массовой информации
Запросы и другие вмешательства позже.
Не делайте область холста большего, чем она должна быть. Как и растровые изображения, любое «пустое пространство» в SVG не будет использоваться, и лучше всего заменяет поля CSS. Обратите внимание, что многие векторные инструменты, такие как эскиз, будут автоматически «обрезать» область холста в выбранные элементы.
В то же время не обрекла область холста к точным краям элементов. Антилиальность все равно будет применено к SVG, а также режущую его слишком близко, может также обрезать согнатие. Вместо этого оставьте по крайней мере 2PX очистить там, где край холста приближается к элементу.
Отзывчивость и производительность тесно связаны, поэтому устанавливают десятичную точность не более двух точек. SVG не думает в целых числах, поэтому векторная точка может иметь значение 1.45882721PX. Эта крайняя точность полностью не нужен, и только добавляет к коду раздувающую и размер файла, поэтому лучше обрезать его на этом этапе.
Аналогично, рисуйте векторные формы, используя как можно меньше точек. Многие новые дизайнеры предполагают больше очков, лучше, когда обратное на самом деле верно: несколько очков хорошо размещены, обеспечивают больший контроль над элементом, а также уменьшая размер файла.
Если вам дают векторные файлы, которые не следуют этому правилу, не волнуйтесь - большинство
Вектор искусства
Приложения имеют опцию «Упрости», вы можете использовать для уменьшения количества точек в элементе без изменения его формы. В качестве альтернативы, для получения подробной работы я предложил плагин, как Asutele Graphics '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 полностью отзывчивым в современных браузерах.
Если вы обрабатываете много SVG, или в спешке вам не нужно выполнять этот шаг вручную. Вместо этого вы можете следовать предложениям, указанным в третьем золотом правил ...
03. Оптимизировать и министерству вывода SVG
Комбинация интеллектуальной оптимизации по редактированию рук и постпродукции может заметно уменьшить размеры файлов SVG
Какой бы ни был инструмент, который вы используете для создания вашего контента SVG, он все еще стоит обработки его вывода через инструмент, как
Svgomg
, который будет заметно обрезать код. Как правило, вы можете сэкономить от 20 до 80 процентов в размере файла. Тот же код может быть интегрирован локально
как глотком или хрюк
Отказ
04. Изменить код для IE
Правило 2 упомянуто, что правильно оптимизированные SVGS полностью отзывчивы в современных браузерах. Это правда, если мы считаем Microsoft Edge в виде современного браузера. Для IE 9-11 у нас есть несколько вопросов для решения. Если мы используем SVG в качестве изображения:
.
Мы можем заставить IE9-11, чтобы правильно отобразить изображение, используя селектор атрибута CSS:
IMG [SRC $ = ". SVG"] {Ширина: 100%;}
Изображения SVG хорошо работают в общем производстве, но имеют ограниченную интерактивность: большинство браузеров будут игнорировать интерактивность и анимацию внутри SVG, размещенного на странице как
Отказ Кроме того, изображения SVG представляют собой дополнительный HTTP-запрос для браузера.
По этим и другим причинам SVG все чаще используется встроенным. В этом случае код SVG нуждается в небольшом количестве лечения для IE:
В добавок к
preserveaspectratio.
Атрибут, т. Е. Нужно немного больше рекомендаций для сохранения правильного масштабирования изображения: взять ширину SVG (
365.
В этом случае) разделите его по высоте (
525.
) и умножьте результат на 100 процентов. Это станет
прокладки - дно
Значение для SVG, «PROPPYPPY» достаточно открыто в IE, чтобы отобразить SVG в правильном соотношении аспекта:
Обратите внимание, что для того, чтобы сохранить ситуацию и очистить, образцы кода в остальной части этой статьи не включают эти изменения. Amelia Bellamy-Royds написал
Отличная статья о масштабировании SVG
Отказ
05. Рассмотрим SVG для текста героя
Использование SVG для текста героя означает, что он автоматически шкала в соответствии со своим контейнером
В настоящее время нет стандарта CSS для размещения текста на его контейнер. Можно масштабировать текст с использованием единиц VW, но почти всегда требуется, по меньшей мере, два вмешательства в средствах массовой информации для «зажима» текста на определенных пределах просмотра. Однако текст SVG автоматически изменится на контейнер:
Заголовок SVG Text {
Вес шрифта: 900; Размер шрифта: 90px; Заполните: синий;
}
Сохранение встроенных SVG сохраняет доступность и SEO, и позволяет стилизировать текст, используя любой шрифт, уже встроенный на страницу. Видеть
здесь
для дополнительной информации.
06. Оставьте ширину и высоту на месте для прогрессивных иконок
Линия не масштабирования инсультирования была применена к этому речевым пузырем, поэтому он не изменится в ширине, когда просмотр вида
Одно исключение из правила 2 - иконы и небольшие логотипы, которые должны сохранить их
ширина
и
высота
Атрибуты, если вы хотите, чтобы они были постепенно расширены:
& lt; href = "http://codepen.io" & gt;
& lt; svg prote = "img" ARIA-MALK = "WODEPEN" Ширина = "50" высота = "50" и GT;
& lt; title & gt; codepen & lt; / title & gt;
& lt; Используйте xLink: href = "# кодепен" / & gt;
& lt; / svg & gt;
& lt; / a & gt;
...
& lt; SVG Style = "Дисплей: нет;" & gt;
& lt; символ ID = "Кодепен" Viewbox = "0 0 50 50" & gt;
& lt; путь d = "..." / & gt;
& lt; / symbol & gt;
& lt; / svg & gt;
Вы можете увидеть пример этой методики в действии
здесь
Отказ
Если мы только размер значков SVG с CSS, а лист стиля сайта не загружается, значки появятся при размере по умолчанию замененного элемента: 300px x 150px. Сохраняя высоту и ширину, в качестве атрибутов, мы можем по умолчанию разместить его до ближайшего разумного прикосновения и использовать наши CSS для повышения того, как они представлены.
07. Используйте векторные эффекты, чтобы держать волосы тонкие
По умолчанию SVG весывает все с помощью Viewport, включая толщину хода. Обычно это работает нормально, но в некоторых случаях - диаграммы и удары, применяемые в зависимости от воздействия на внешнюю часть текста, в частности - вы можете захотеть следить за тем же толщиной, независимо от того, какой размер рисунка. Это домен малоизвестных
вектор-эффект
Свойство, которое можно применять в качестве атрибута презентации или в CSS:
Путь {
Заполните: #fff; Ход: # 111;
Ширина хода: 2;
Векторный эффект: неразмерный ход;
}
Многие разработчики предполагают, что SVG может использовать только векторы, но JPEG и PNG также могут быть применены к чертежу SVG. И до тех пор, пока вы до сих пор следили за моими правилами, эти изображения будут отзывчиваться, когда вы добавите растровое изображение через
тег:
& lt; / image & gt;
09. Рассмотрим адаптивные решения
Классический логотип Coca-Cola, представленный на разных адаптивных размерах
Делать вещи пойти «присесть» - это только одна часть адаптивного дизайна. О чем RWD о том, что в большим смысле адаптивного дизайна представляет собой подходящее содержание во всех размерах просмотра.
Это может быть достигнуто различными способами. ackivelogos.co.uk предоставляет серию примеров, которые используют SVG SPRITES, но я предпочитаю интегрировать средства массовой информации в SVG для создания того, что я называю «брендинг модулей». Этот подход позволяет мне добавить, удалять и изменять видимость компонентов. Узнайте больше о адаптивных брендингах модулей
в моей статье
Отказ
Эта же методика может быть использована для диаграмм, иллюстраций, карт и многое другое. В простейших модулях сама CSS может быть написана внутри SVG, что делает его пригодным для использования повсюду, как указано в предыдущем правиле.
10. Интеграция медиа-запросов в SVG
Многие люди не знают, что медиа-запросы CSS могут быть написаны внутри самого 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 все и (Макс-Ширина: 90Rem) {
#drink, #coke {непрозрачность: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "Coca-Cola" & gt;
& lt; путь d = "m109.6 ... & gt;
Важно отметить, что медиа-запрос может только «видеть» элемент внутри: то есть любое измерение относится к самому элементу, а не на странице. Одним из потенциальных недостатков этого подхода заключается в том, что область холста SVG всегда будет оставаться прежней, относительно элементов внутри него.
Бесконечная масштабируемость SVG является его величайшим активом, но функция, которая все еще несколько недостойна браузерами и векторными редакторами. Интеграция этих руководящих принципов в ваш производственный рабочий процесс и обменивая их другим в вашей команде, вы можете создавать плавный отзывчивый SVG для Интернета, что делает его частью активов, которые вы используете в разработке каждый день.
Эта статья изначально появилась в
Чистый журнал
Выпуск 283;
Купить это здесь
!
