SVG и CSS
На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG (en-US) .
Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.
Общая информация: SVG
SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.
SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.
Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.
Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.
| На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference (en-US) , для информации о поддержке отдельных элементов.В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.Более подробная информация о SVG в Mozilla, представлена на станице SVG (en-US) в этой wiki. |
|---|
За дело: Демонстрация SVG
Создайте новый документ SVG, как обычный текстовый файл, doc8.svg . Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> title>SVG demonstrationtitle> desc>Mozilla CSS Getting Started - SVG demonstrationdesc> defs> g id="segment" class="segment"> path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> g> g id="quadrant"> use xlink:href="#segment"/> use xlink:href="#segment" transform="rotate(18)"/> use xlink:href="#segment" transform="rotate(36)"/> use xlink:href="#segment" transform="rotate(54)"/> use xlink:href="#segment" transform="rotate(72)"/> g> g id="petals"> use xlink:href="#quadrant"/> use xlink:href="#quadrant" transform="rotate(90)"/> use xlink:href="#quadrant" transform="rotate(180)"/> use xlink:href="#quadrant" transform="rotate(270)"/> g> radialGradient id="fade" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> stop id="fade-stop-1" offset="33%"/> stop id="fade-stop-2" offset="95%"/> radialGradient> defs> text id="heading" x="-280" y="-270"> SVG demonstrationtext> text id="caption" x="-280" y="-250"> Move your mouse pointer over the flower.text> g id="flower"> circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> use id="outer-petals" xlink:href="#petals"/> use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> g> svg>
Создайте новый файл CSS, style8.css . копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:
/*** SVG demonstration ***/ /* page */ svg background-color: beige; > #heading font-size: 24px; font-weight: bold; > #caption font-size: 12px; > /* flower */ #flower:hover cursor: crosshair; > /* gradient */ #fade-stop-1 stop-color: blue; > #fade-stop-2 stop-color: white; > /* outer petals */ #outer-petals opacity: 0.75; > #outer-petals .segment-fill fill: azure; stroke: lightsteelblue; stroke-width: 1; > #outer-petals .segment-edge fill: none; stroke: deepskyblue; stroke-width: 3; > #outer-petals .segment:hover > .segment-fill fill: plum; stroke: none; > #outer-petals .segment:hover > .segment-edge stroke: slateblue; > /* inner petals */ #inner-petals .segment-fill fill: yellow; stroke: yellowgreen; stroke-width: 1; > #inner-petals .segment-edge fill: none; stroke: yellowgreen; stroke-width: 9; > #inner-petals .segment:hover > .segment-fill fill: darkseagreen; stroke: none; > #inner-petals .segment:hover > .segment-edge stroke: green; >
Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.
Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:
Примечания к демонстрации:
- Документ SVG привязывается к таблице стилей общепринятым способом.
- SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
Что дальше?
В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 авг. 2023 г. by MDN contributors.
Описание и примеры стандартных функций SVG
Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax
Как добавить SVG в HTML5 страницу
- Использование тега
- Использование тега
- Использование
тега
- Использование непосредственного встраивания (inline SVG )
- Использование тега
- Использование CSS Background Image
1. Использование
Если вы планируете использовать более продвинутые функции SVG, такие как применение таблицы стилей CSS или внедрение скриптов, то
тег HTML5 лучший способ.
Your browser does not support SVG
Для старых браузеров не поддерживающих SVG есть оригинальный способ замены SVG изображения фоллбек картинкой png :
Браузер не понимающий SVG проигнорирует тег и перейдет к следующему тегу и обработает его, как обычный HTML тег и выведет картинку.
Для проверки работоспособности SVG анимации кликните на кнопки “GO” и “STOP” .
Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.
/* SVG specific fancy CSS styling here */
2. Использование
Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов .
Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи В данном примере анимация работает, так как команды на её реализацию находятся внутри файла SVG.
3. Использование тега.
SVG документ может быть добавлен на вашу веб страницу, как любое другое изображение:
Для браузеров не воспринимающих SVG David Bushell предложил прием подмены *.svg изображением *.png .
Можно, как обычно для любого другого изображения задать ширину, высоту. Но почему этот способ добавления SVG, не стал самым распространенным способом?
По соображениям безопастности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE9 , Safari , Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.
4. Использование непосредственного встраивания (inline SVG ).
< title >Embedded SVG < / title >
< h1 >Embedded SVG < / h1 >
Этот метод работает почти во всех HTML5 браузерах и также поддерживает анимацию, скрипты и CSS.
Но должны ли мы использовать его?
Такой вариант возможен для небольших SVG изображений или для встраиваемых с помощью JavaScript изображений, но я рекомендую Вам сохранять эти SVG изображения в отдельные файлы, если это возможно. Так как этот метод не позволяет поддерживать кэширование.
5. Использование
Я включил тег в целях указаний всех возможностей внедрения SVG в HTML страницу, но никогда не используйте этот тег.
Потому что тег никогда не был и наверное не будет частью спецификации HTML или XHTML . Однако этот тег поддерживается большинством браузеров и часто используется для реализации флэш плагинов.
Вот код. Он работает, но не используйте его!
Работа с SVG. Вставляем SVG на веб страницу
В этом уроке мы рассмотрим способы вставки SVG на веб страницы. Сравним различные варианты и браузерную поддержку:
Через тег
Самый простой способ вставить SVG — воспользоваться тегом :
Заметка: размеры изображения можно задать в самом SVG документе; Увеличивать можно до любого размера без потери качества, ведь это векторная графика. Так же, данный элемент можно оформлять через CSS.
Через CSS
Так же SVG можно вставить на страницу через CSS: через свойство background-image:
header < background: url(assets/svg/columns.svg); >
Если в SVG присутствует какой-то скрипт, интерактивность и ссылки, то они будут игнорированы.
Через тег SVG
В HTML5 есть возможность прямой вставки SVG через одноимённый тег:
HTML5 page with SVG Content This is the markup of an ordinary HTML5 page.
Данный способ сохраняет все скрипты, ссылки и прочий интерактив.
Через теги
Наилучшая совместимость с IE и сохранение основных особенностей SVG.
Как шрифт через @font-face
Поскольку любой шрифт это ни что иное, как набор векторных фигур, то SVG можно вставить на страницу через свойство @font-face:
@font-face
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/428/Using-SVG-In-Web-Pages
Перевел: Станислав Протасевич
Урок создан: 25 Декабря 2014
Просмотров: 89590
Правила перепечатки
5 последних уроков рубрики "HTML5"
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Как в css вставить svg
SVG — это формат векторных изображений, основанный на XML.
SVG имеет массу преимуществ перед растровыми изображениями:
- векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной;
- SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения;
- содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код;
- поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками;
- SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется;
- внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде);
- внутри файла могут находиться CSS и JavaScript.
SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.
Он хорошо подходит для использования в адаптивном дизайне, потому что без потерь растягивается и сжимается, меньше весит и не выглядит размытым на устройствах с высокой плотностью пикселей. Вот, например, скрин с современного смартфона:
Хорошо видно, что SVG (внизу) в этих условиях выглядит гораздо лучше, чем PNG (наверху). Так что если поставить себе задачу сделать сайт, который хорошо выглядит на любых устройствах, SVG очень пригодится.
Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:
В основном, это наборы иконок.
Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.
SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.
Embed/object/iframe
Содержимое доступно для внешнего JavaScript. Хорошая поддержка браузерами (все, кроме IE8 и ниже).
| Embed: | Object: | Iframe: |
Embed:
embed src="your.svg" width="199" height="200">Object:
object data="your.svg" type="image/svg+xml" width="199" height="200">object>Iframe:
iframe src="your.svg" width="199px" height="200px">iframe>Поддержка браузерами:
| IE | Opera | Opera Mini | Opera Mobile | Chrome | Firefox | Safari |
| 9+ | 9+ | 5+ | 10+ | 4+ | 3+ | 3.2+ |
IMG
Содержимое недоступно для JS.
img src="your.svg">Поддержка браузерами:
| IE | Opera | Opera Mini | Opera Mobile | Chrome | Firefox | Safari |
| 9+ | 9+ | 5+ | 10+ | 4+ | 4+ | 4+ |
CSS-фоны
Содержимое недоступно для JS. Могут быть проблемы в старых Операх. Не работает в Opera Mini В Opera Mini работает только без viewBox в SVG.
background-image: url(your.svg);Поддержка браузерами:
| IE | Opera | Opera Mini | Opera Mobile | Chrome | Firefox | Safari |
| 9+ | 12+ | 5+ | 16+ | 5+ | 24+ | 5+ |
Инлайновый SVG
Не работает в Opera Mini.
Поддержка браузерами:
| IE | Opera | Opera Mini | Opera Mobile | Chrome | Firefox | Safari |
| 9+ | 11.6+ | — | 12+ | 7+ | 4+ | 5.1+ |
Примеры в посте вставлены как есть, без фолбеков. Можно открыть страницу в интересующем браузере и посмотреть как поддерживаются разные способы вставки.
Способы отображение в старых браузерах:
1. Хак для элемента с фоном:
DIV background-image: url(your.png); /* PNG для IE6-8 */ background-image: url(your.svg), none; >Вторая строка сработает в браузерах с поддержкой CSS3, старые её проигнорируют и покажут PNG из первой строки.
2. Способ с image
Современные браузеры выберут атрибут xlink:href и покажут SVG, старые выберут src и покажут растровую версию:
svg width="200px" height="200px"> image xlink:href="your.svg" src="your.png" width="200px" height="200px"/> svg>Способ найден здесь: lynn.ru/examples/svg/. Про этот способ есть статья у Криса Коера Svg fallbacks, в которой он анализирует этот вариант вставки и предлагает другие.
Способ хорошо работает в IE8 и Opera Mini. Минус способа — загрузка обоих файлов в IE9-11, хотя отобразится только SVG. Также есть проблемы с отображением в 12-й Опере: вместо картинки иногда загружается вот такое:
3. Modernizr
Элементы, содержащие SVG-графику, заворачиваются в div.svg (например). Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg , дальше немного CSS:
/* Задаем обертке размеры и фон в PNG: */ .no-svg .svg width: 200px; height: 200px; background: url(your.png); /* PNG-заглушка */ > /* Скрываем содержимое обертки (иначе будут отображаться иконки незагрузившихся картинок) */ .no-svg .svg IFRAME, .no-svg .svg OBJECT, .no-svg .svg EMBED, .no-svg .svg IMG display: none; >Стили сработают только в браузерах, не поддерживающих SVG.
Хорошее решение для IE8 и старше, но может возникнуть проблема с Opera Mini. Она имеет частичную поддержку SVG, поэтому не будет селектора .no-svg , и при этом она не поддерживает SVG в CSS-фонах и Inline Svg, так что они не отобразятся.
4. :root
Селектор :root сработает только в браузерах с поддержкой CSS3, следовательно с его помощью также можно отфильтровать стили для старых и для новых браузеров.
/* По умолчанию показываем PNG: */ .svg width: 200px; height: 200px; background: url(your.png); > /* Контейнеры с SVG скрыты. */ .svg IFRAME, .svg OBJECT, .svg EMBED, .svg IMG display: none; > /* Включаем содержимое для браузеров с поддержкой CSS3 */ :root IFRAME, :root OBJECT, :root EMBED, :root IMG display: inline-block; >Как и предыдущее решение, подойдет для IE8 и старше, но не поможет в Opera Mini, потому что она поддерживаeт CSS3, поэтому не будет заглушек для элементов с SVG-фоном и инлайновым SVG.
5. Решение для Opera на Presto (например, 12 и Mini)
В Opera 12 SVG-фоны могут вести себя странно, местами до сильного. Совершенно невинный CSS может привести к проблемам отрисовки векторых фонов при прокрутке страницы. Мне удавалось получить такое:
Действующий пример можно увидеть тут: http://jsbin.com/winag/1/edit. Откройте ссылку в Opera 12 и прокрутите страницу вверх-вниз.
В Opera Mini большие проблемы c фоновым SVG, а инлайновый не поддерживается совсем.
Opera Mini и фоновый SVG:
На этот случай можно использовать хак, который сработает только в Опере:
doesnotexist:-o-prefocus, .selector background-image: url(your.png); >Способ использует специфичный для оперы селектор, подробнее про такие селекторы можно почитать тут: opera.com/docs/specs/presto2.12/css/o-vendor
6. Селектор только для Opera Mini
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) .selector background-image: url(your.png); > >Рассмотренная тема — только верхушка айсберга, в спецификации есть ещё много всего интересного. Продолжение следует : )
Показать комментарии
Сайдбар
Статьи
- Математические функции в CSS
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа "прошить" элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
- SVG: полезные ссылки
- CSS-селекторы одной таблицей
- Таблица именованных цветов
- Функции Transform
- Свойства Transform
- Свойства Animation одной таблицей
- Разный синтаксис Flexbox
- Свойства Flexbox одной таблицей