Добавляем svg-файл на стркницу с помощью php
SVG-файл можно добавить на страницу разными способами, как картинку через тег , или через тег , но используя эти способы нельзя работать с svg-файлом как с HTML, т.е. задавать ему цвет, фон и т.п.
Чтобы работать с svg-файлом как с HTML нужно разместить его контент в следующем виде:
Но на сервере файл хранится в виде файла типа file.svg. Что привести в нужны формат используем php-функцию file_get_contents(), она вернет контент файла.
В html-коде вы выводится нужный формат данных, с которым можно работать при помощи css.
Как вставить SVG в HTML
SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.
Для чего используют SVG
- Маленький размер файла, который хорошо сжимается
- Масштабирование до любого размера без потери качества
- Отлично смотрится на дисплеях retina
- Полный контроль дизайна при интерактивности и в фильтрах
Создание SVG для дальнейшей работы
Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:
Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.
После того, как вы сохраните файл, появится еще одно диалоговое окно с опциями SVG. Честно говоря, я не очень много знаю о всех представленных в этом окне настройках. Существует спецификация SVG профилей, так что, если вам интересно можете почитать. Я считаю, что SVG 1.1 работает отлично.
Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.
Оба способа могут оказаться полезными.
Используем SVG в виде тега img
Если сохранить SVG как обычный файл, то можно использовать его в обычном теге img:
В Illustrator наш холст получился 612px ✕ 502px.
Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:
Check out this Pen!
Как сделать кроссбраузерный SVG
Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.
Если вам необходимо использовать SVG, но также нужна поддержка вышеперечисленных браузеров, есть несколько вариантов решения проблемы. Я использовал несколько техник в различных проектах для решения этой проблемы.
Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:
if (!Modernizr.svg) < $(".logo img").attr("src", "images/logo.png"); >
Если у вас нет опыта работы с Modernizr, почитайте статью “Что такое Modernizr и как с ним работать”
David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:
Также может помочь сервис SVGeezy. По ходу продолжения этой статьи мы разберём много различных резервных методов для поддержки SVG.
Использование SVG в качестве фона background-image
По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:
.logo
Обратите внимание, мы устанавливаем background-size точно таким же, как и размер элемента. Это необходимо сделать, так как в противном случае мы бы увидели небольшую верхнюю часть оригинального изображения. Эти цифры учитывают оригинальные пропорции изображения. Вы также можете использовать в качестве значений background-size ключевые слова, например contain, чтобы изображение полностью занимало весь элемент.
Использование SVG в качестве фонового изображения накладывает свой отпечаток на браузерную поддержку, но вцелом, всё аналогично, как и при использовании тега img.
Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:
.main-header < background: url(logo.svg) no-repeat top left; background-size: contain; >.no-svg .main-header
Если у вас есть проблемы с использованием двух вышеперечисленных способов использования SVG, ниже приведены еще способы размещения векторной графики.
Использование “inline” SVG
Выше упоминалось, что при сохранении картинки в формате SVG, с помощью редактора Illustrator можно получить правильный SVG код (также можно отрыть файл с помощью текстового редактора и скопировать этот код). Вы можете скопировать этот код в ваш HTML и SVG будет отображаться абсолютно также, как при использовании img.
Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.
Также есть вариант для вставки SVG на стороне сервера:
Оптимизация SVG
Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.
Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo
Стилевое оформление SVG
Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.
Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например :hover.
.kiwi < fill: #94d31b; >.kiwi:hover
В SVG имеются забавные фильтры. Например размытие:
Затем вы можете при необходимости применить это в css:
.ground:hover
Вот, что получилось:
Check out this Pen!
Поддержка “inline” SVG браузерами
Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.
Один из вариантов фолбэка для такого типа SVG:
Затем снова используем Modernizr:
.logo-fallback < display: none; /* Make sure it's the same size as the SVG takes up */ >.no-svg .logo-fallback
Использование SVG в качестве объекта object
Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:
Для кроссбраузерной поддержки используем Modernizr:
.no-svg .logo
Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.
Data URI для SVG
Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:
Вы можете использовать этот код где угодно! Нпример:
.logo < background: url(data:image/svg+xml;base64,[data]); >
И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!
- Войдите, чтобы оставлять комментарии
Использование SVG
SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.
Зачем вообще нужен SVG?
- Небольшие размеры файлов, отличное сжатие;
- Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
- Хорошо выглядит на ретине;
- Широкие возможности, которые предоставляют фильтры и интерактивность.
Создадим изображение SVG, с которым будем работать дальше
Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.
Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.
Adobe Illustrator умеет сохранять в SVG.
При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.
Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.
Оба варианта могут пригодиться.
Добавляем SVG на страницу с помощью тега
Если сохранить изображение SVG в файл, то его можно вставить с помощью тега .
img src="kiwi.svg" alt="Киви на овале"> В Illustrator рабочая область была размером 612px ✕ 502px.
Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример:
Поддержка браузерами
SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.
Если вы хотели бы использовать SVG, но проект поддерживает браузеры, которые не могут вставлять его через img , есть разные варианты. Я описал некоторые приемы в нескольких своих мастер-классах.
Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:
if (!Modernizr.svg) < $(".logo img").attr("src", "images/logo.png"); > Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:
img src="image.svg" onerror="this.onerror=null; this.src='image.png'"> Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.
Добавляем SVG через background-image
Использовать SVG в качестве фона c помощью CSS-свойства background-image так же просто, как и вставка с помощью тега img .
href="/" class="logo"> Kiwi Corp .logo display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; > Обратите внимание, что для селектора .logo задан размер background-size . Это необходимо, иначе будет видна только верхняя левая часть изображения SVG, у которого исходный размер намного больше. Эти размеры прописаны с учётом соотношения сторон изображения в оригинале. Можно также использовать для background-size значение contain , чтобы убедиться в том, что изображение поместится в родительский контейнер, если вам не известно какого размера оно должно быть.
Поддержка браузерами
Вставка SVG через свойство background-image по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с img . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.
В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании img . Если заменить background-image на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:
.main-header < background: url(logo.svg) no-repeat top left; background-size: contain; > .no-svg .main-header < background-image: url(logo.png); > Общая проблема при использовании ![]()
и background-image …
Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!
Добавляем SVG непосредственно в документ
Помните, как при необходимости можно получить SVG-код прямо при сохранении изображения в Illustrator? Ещё можно просто открыть SVG-файл в текстовом редакторе и скопировать его код. Этот код можно вставить прямо в HTML-документ, и SVG-изображение будет отображаться точно так же, как если бы его вставили с помощью тега img .
body> body> Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.
Если вы используете серверный язык, который позволяет получить содержимое файла и вставить его в документ, вы по крайней мере сможете очистить свой документ от блоков SVG кода. Вот так:
include("kiwi.svg"); ?> Сначала оптимизируем
Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.
Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.
Затем управляем с помощью CSS
Видите, насколько сильно теперь SVG похоже на HTML? Это потому, что они оба не что иное, как XML (теги и всякая всячина внутри). В нашем проекте есть два составляющих элемента, и . Можно просто открыть код и присвоить им классы, как любому другому элементу HTML.
svg . > ellipse class="ground" . /> path class="kiwi" . /> svg> Теперь эти отдельные элементы можно контролировать с помощью специального CSS для SVG. Необязательно добавлять CSS в сам SVG, его можно разместить где угодно, даже в файле с глобальными стилями. Обратите внимание, что для элементов SVG есть специальный набор свойств CSS. Например, нельзя использовать background-color , вместо него есть fill . Однако кое-что стандартное тоже можно использовать, например, :hover .
.kiwi < fill: #94d31b; > .kiwi:hover < fill: #ace63c; > Более того, в SVG можно использовать фильтры, например размытие:
svg . > . filter id="pictureFilter" > feGaussianBlur stdDeviation="5" /> filter> svg> И его можно применить из CSS:
.ground:hover < filter: url(#pictureFilter); > Пример того, что может получиться:
- Подробнее о применении фильтров для SVG
- Самый лучший список CSS-свойств для SVG, который мне удалось найти (разработанный для Opera)
- Песочница для тестирования эффектов от применения фильтров для SVG (от Microsoft)
Поддержка браузерами
Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.
Для этого способа вставки SVG можно использовать следующие приемы деградации:
svg> . svg> div class="fallback"> div> И снова используем Modernizr:
.logo-fallback < display: none; /* Убедитесь, что размер соответствует размеру SVG */ > .no-svg .logo-fallback < background-image: url(logo.png); > Добавляем SVG на страницу с помощью тега
Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.
object type="image/svg+xml" data="kiwi.svg" class="logo"> Kiwi Logo object> На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:
.no-svg .logo < width: 200px; height: 164px; background-image: url(kiwi.png); > При таком подходе не возникают проблемы с кэшированием, и он поддерживается браузерами лучше, чем другие. Но если использовать внешний файл со стилями или встроенный в документ, CSS-навороты работать не будут, нужно добавить элемент в сам SVG-файл.
svg . > style> /* специальные CSS-фишки для SVG */ style> . svg> Внешние файлы со стилями для SVG, вставленного с помощью
Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега . Вот что нужно добавить в SVG-файл перед открывающим тегом :
Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).
Использование Data URI для SVG
SVG-файл можно уменьшить еще сильнее, если конвертировать его в Data URI. На Mobilefish.com для этого есть онлайн-конвертер. Просто скопируйте содержимое SVG-файла и заполните форму, результат конвертирования можно будет скопировать с текстового поля. Не забудьте удалить переносы строки в полученном коде. Выглядеть он будет как полнейшая тарабарщина:
Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо [data] в следующих примерах.
Добавление на страницу с использованием тега
img src="data:image/svg+xml;base64,[data]"> Добавление на страницу в качестве фона с использованием CSS
.logo < background: url(data:image/svg+xml;base64,[data]); > Добавление на страницу с использованием тега
object type="image/svg+xml" data="data:image/svg+xml;base64,[data]"> fallback object> Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.
Консольные штучки для перекодирования SVG в base64:
@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy
— Benny Schudel (@bennyschudel) March 2, 2013
Материалы для дальнейшего чтения
- Дэвид Бушел: Букварь фронтендера по SVG-хакерству
- Дэвид Бушел: Независимость от разрешения с SVG
- MDN про SVG
- Поддержка браузеров для всяких всячин повязанных с SVG.
- Питер Гестон (Peter Gasston): Создание лучших SVG-спрайтов при помощи анкерных идентификаторов
- simuari: SVG стеки
- SVG.js — «Упрощённая библиотека для манипуляции и анимации SVG»
- В Emmet есть отличный способ генерировать data URI для SVG прямо в редакторе кода
- В Compass также есть вспомогательное средство для data URI
- Adobe: Стилизация SVG
- Эндрю Дж. Бейкер (Andrew J. Baker): Приручаем зверя SVG
- Альтернатива Illustrator: Inkscape, Sketch
- Кристер Кари (Krister Kari): Использование SVG-изображений для мобильных браузеров
Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:
Примечания
1. Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.
© 2013 Frontender Magazine
Кроме материалов, опубликованных под лицензией Creative Commons
Как добавить SVG в свойство content псевдоэлементов ::before или ::after
SVG это современный формат для векторной графики. Его можно использовать для добавления графики на страницы сайта, классическим способом, как ссылку на отдельный файл, так и внедрив содержимое этого файла непосредственно в HTML код, ведь SVG это валидный HTML5.
Что такое ::before и ::after
Это псевдоэлементы, которых нет в HTML файле, но которые можно добавить с помощью CSS и использовать для стилизации страниц сайта, почти как обычные элементы, как div или span. Их удобно использовать для добавления контента в страницу, когда HTML код не доступен или его структура не должна изменяться.
SVG и псевдоэлементы
В чем суть проблемы и зачем вообще использовать SVG в ::before и ::after ? Чтобы было легче ответить, разобьём этот вопрос на насколько.
Почему SVG? Он легкий и масштабируется, его удобно использовать в качестве пиктограмм для иконок, к тому же, все современные браузеры его поддерживают.
Почему псевдоэлементы и content ? На самом деле это не обязательно. С тем же успехом, можно использовать свойство background-image, любого другого доступного элемента, но если это свойство уже используется, а HTML нельзя модифицировать, то только псевдоэлементы и свойства background-image или content , что удобней или доступно.
SVG в свойстве content
Итак, с долгим лирическим отступлением закончили, приступим непосредственно к решению задачи, которая ставится заголовком этой статьи.
У нас есть тестовый элемент , который используем для добавления псевдоэлемента и svg иконки:
#test-icon::before < content: url("data:image/svg+xml;charset=UTF-8,"); display: inline-block; width: 24px; height: 24px; > На что следует обратить внимание и возможные причины почему иконка SVG не показывается на странице:
- Между url(» и «); не должны быть двойных кавычек, все они заменены на одинарные.
- Наличие правильного MIME типа image/svg+xml .
- Наличие xmlns=’http://www.w3.org/2000/svg’ version=’1.1′ .
- Свойства height=’24’ и width=’24’ указываются без единиц измерения.
- В свойстве fill не должно быть символа решетки ( # ), для указания цвета. Ее нужно заменить кодом ‘ %23 ‘ (как в данном примере) или указывать цвет словами, например, white , purple , red и т.д.
Пытливый веб разработчик заметит, а почему не указать просто ссылку на файл: url(«path/to/svg/icon.svg»); . Да так можно, но этим мы создаем дополнительный HTTP запрос к серверу, что негативно влияет на скорость загрузки.
При использовании этого подхода можно редактировать иконку прямо из CSS, и даже без использования векторного редактора, правда это справедливо для SVG иконок, в которых используются простые фигуры, например, circle , rect , line , возможно polyline . Если там есть только path , вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.