Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG . Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.
Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px ). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds . Затем жмём save as и выбираем SVG , и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.
Приёмы для уменьшения размеров файла.
(Смотрите по оптимизации)
Чтобы добиться наименьшего размера SVG , логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO . Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS , так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.
Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool , который поможет удалить точки и при этом оставить общую форму той же.
Предварительная оптимизация
Smart Remove Brush Tool удалил точки
Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).
Точки вне сетки
Выравнивание по сетке
Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.
И, наконец, последнее, но немаловажное, то, о чём обычно забывают - это активировать gzip сжатие SVG на вашем сайте в.htaccess файле.
AddType image/svg+xml svg svgz
В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
На сегодняшний день существует уже не один способ создавать SVG анимацию. Это можно сделать с помощью тега, который вставляется прямо в код SVG . Есть специальные библиотеки, такие как Snap.svg или SVG.js .
Мы рассмотрим немного другой подход: с помощью встроенного SVG (SVG кода прямо в HTML) и анимации отдельных частей прямо через CSS .
Я недавно поэкспериментировал с этим методом, в проекте для моей альма-матер Wufoo , так, чтобы немного освежить в памяти тему, которую мы будем здесь рассматривать.
В моих последних проектах SVG использовались редко, поэтому, думаю, эта статья представляет собой прекрасную возможность уделить ему больше внимания.
Окончательный вид анимации очень простой. Вот как она выглядит:
Посмотреть на CodePen
Давайте рассмотрим, как это делается.
1. Составляем список элементов, которые мы будем использовать
Может показаться, что здесь много работы на манер как нарисовать сову, но эта статья посвящена анимации, так что с графикой давайте разберемся как можно быстрее.
Мой план заключался в том, чтобы сделать супер простую рекламу Wufoo , использовав их классический логотип, цвета и корпоративный стиль. А затем добавить немного креатива:
- Создать эффект, будто буквы убегают со страницы. Wufoo — это веселое слово, пусть буквы тоже будут веселыми;
- За день до этого мы разработали дизайн футболки, на лицевой стороне которой был изображен динозавр, а на задней надпись: «Быстрый. Умный. Грозный ». Это черты, которые присущи и динозаврам, и Wufoo . Не говоря уже о том, что мы обыграли слово «FORMidble » (грозный). Поэтому я захотел сделать так, чтобы в анимационном блоке появлялись и исчезали эти слова;
- Чтобы связать эти слова с динозавром, у нас будет появляться голова T-Рекса, а затем быстро исчезать. При этом будет выводиться слово «Быстрый », что будет еще одним интересным связующим звеном для элементов.
- Все эти элементы я загрузил в Illustrator :
Обратите внимание, как очерчены тексты логотипа и слогана. Это означает, что они являются просто векторными фигурами, и к ним легко можно применять эффекты, как в SVG , так и в
Текст, который вы видите, «Быстрый. » так и остается в Illustrator в формате текста.
Когда я сохраню файл в Illustrator , надпись останется элементом.
2. Сохраняем в формате SVG
Illustrator поддерживает функцию сохранения в формате SVG :
Вы можете открыть этот SVG -файл в редакторе кода и увидеть в нем код SVG :
3. Вычищаем SVG, задаем классы для фигур
Вы можете пропустить код через SVGO , чтобы оптимизировать его и убрать ненужные элементы типа DOCTYPE и тому подобное.
Но нам сейчас более важно задать различные имена классов для фигур, таким образом, мы сможем выбрать их в CSS и производить разные действия!
4. Вставляем SVG
Вы можете скопировать этот SVG -код и вставить его прямо в HTML, в то место, где вы хотите выводить блок. Но это всего лишь примитивный шаблон.
Вы можете сделать что-то вроде этого:
5. Анимация!
Теперь все эти фигуры загнаны в DOM , и мы можем позиционировать их и задавать стили, как и для любого другого элемента HTML. Давайте сделаем это.
Предположим, мы хотим использовать 10-секундную временную шкалу:
Сначала выпадают и исчезают слова
Первое, что мы хотим сделать, это вывести поочередно слова «Быстрый. Умный. Грозный. » Каждое слово будет показываться в течение одной секунды.
Так мы создаем анимацию, в которой показ каждого слова занимает 10% времени:
@keyframes hideshow { 0% { opacity: 1; } 10% { opacity: 1; } 15% { opacity: 0; } 100% { opacity: 0; } }
Затем указываем первое слово и длительность всей анимации в 10 секунд (10% из которых составляет 1 секунда):
Text-1 { animation: hideshow 10s ease infinite; }
Следующие два слова сначала будут скрытыми (opacity: 0; ), а затем используем ту же анимацию, только с задержкой во времени, чтобы следующие слова выводились немного позже:
Text-2 { opacity: 0; animation: hideshow 10s 1.5s ease infinite; } .text-3 { opacity: 0; animation: hideshow 10s 3s ease infinite; }
Дополнительные 0,5 секунды нужны для того, чтобы задать интервал между выводом каждого следующего слова.
Прыгающие буквы
Как только мы задали анимацию для этого элемента, приступаем к эффектам для букв в слове Wufoo , которые должны прыгать в сторону вот так:
Хитрость тут в том, что мы создаем анимационный эффект, который длится всего 5 секунд, но запускаем его один раз вперед, а затем в обратном направлении.
Таким образом, он будет соответствовать нашему 10-секундному графику, и располагаться посередине временной шкалы. Нам остается только задать параметры для прокручивания эффекта анимации в одном направлении, потому что при обратной прокрутке он просто вернется на исходную позицию.
Эффекты для каждой буквы имеют небольшую задержку во времени, поэтому они перемещаются не все одновременно, а одна за другой:
Wufoo-letter { animation: kaboom 5s ease alternate infinite; &:nth-child(2) { animation-delay: 0.1s; } &:nth-child(3) { animation-delay: 0.2s; } &:nth-child(4) { animation-delay: 0.3s; } &:nth-child(5) { animation-delay: 0.4s; } } @keyframes kaboom { 90% { transform: scale(1.0); } 100% { transform: scale(1.1); } }
Приведенный выше SCSS -код — это просто короткая версия, он не включает в себя префиксов (которые понадобятся вам на практике).
Я думаю, что animation-delay это свойство, которое было бы полезно взять из оригинального CSS . Это выглядело бы более аккуратно, когда буквы сдвигаются с небольшой задержкой.
И наконец, динозавр
После того, как в блоке промелькнули эти надписи, снизу выезжает голова динозавра. Несмотря на то, что фигура динозавра состоит из большого количества элементов, мы можем позиционировать их все вместе с помощью тега позиционирования (группа), который содержит в себе все эти элементы.
Поскольку для позиционирования анимации эффективнее использовать преобразования, мы сделаем это с помощью keyframes :
@keyframes popup { 0% { transform: translateY(150px); } 34% { transform: translateY(20px); } 37% { transform: translateY(150px); } 100% { transform: translateY(150px); } }
Мы хотим, чтобы этот фрагмент анимации выводился в «последние » приблизительно 3 секунды. Этот цикл на самом деле работает все 10 секунд, но собственно видимые эффекты вы будете наблюдать в течение последних 3 секунд.
Когда translateY (150 пикселей) применен в эффекте, динозавр перемещается так далеко вниз вне поля блока, что вы его не видите.
Но в течение 37% времени этой анимации (около 3 секунд) вы видите, что он медленно двигается вверх, а затем быстро убирается вниз.
Когда мы применим эту анимацию, мы убедимся что:
- Динозавр сначала скрыт;
- Вывод этого фрагмента анимации задерживается во времени, так что он начинается сразу после того, как буквы в слове логотипа закончили свой пляс (совершили смешение в сторону и вернулись на место).
Trex { transform: translateY(150px); animation: popup 10s 6.5s ease infinite; }
Динозавр падает вниз как раз в последнюю секунду так, чтобы сразу после этого в блоке снова появилось слово «Быстрый » (интервал воспроизведения анимации установлен на infinite , чтобы она запускалась по кругу снова и снова). Это привносит немного веселой синергии.
6. Делаем блок кликабельным / интерактивным объявлением
Одной из полезных особенностей SVG является возможность масштабировать объекты до любого размера без потери качества.
Чтобы создать встроенный блок SVG с сохранением оригинального качества изображений, мы можем использовать технику ol’ padded box .
.wufoo-ad-wrap { height: 0; padding-top: 100%; position: relative; } .wufoo-ad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }Идея заключается в том, что «обертка » всегда будет принимать форму квадрата, отталкиваясь от значения его ширины. Затем мы задаем абсолютные значения позиции SVG внутри этого идеального квадрата, размеры которого подгоняются, исходя из ширины.
Поскольку это объявление (которое, конечно, должно быть кликабельным), то в качестве содержащего контейнера вместо
Подготовил: Евгений Рыжков Дата публикации: 27.08.2010
Последнее обновление: 17.11.2010
Задача
Отобразить SVG-изображение на HTML-странице.
Существует несколько способов это сделать, но не все из них кроссбраузерны.
SVG через iframe
Наличие фрейма для многих уже ставит крест на данном способе. Нынче есть более совершенные способы решения данной задачи. К тому же в таком виде не получится реализовать прозрачные изображения (фрейм имеет фон), а так же нет доступа из внешних скриптов к элементам рисунка.
SVG через object
Имеем: валидный чистый код, альтернативный текст, где можно снабдить пользователя инструкцией, что делать, если он не видит картинки (например, отправить на сайт нормального браузера или дать ссылку на плагин, установка которого ему поможет). Такое внедрение поддерживает прозрачность в SVG изображении (правда в IE тут проблема: прозрачные участки будут залиты белым). Из минусов: нет возможности влиять на изображения внешними скриптами (из HTML), только теми, которые находятся в самом SVG-файле.
Метод хорош для фоновых изображений или каких либо статичных картинок.
SVG через embed
Такой способ якобы позволяет взаимодействовать скриптам в HTML с содержимым SVG-файла (мне пока такого добиться не удалось). Для IE имеет атрибут wmode (
Этот способ сейчас пользуется большой популярностью.
SVG в HTML коде
- следует обратить внимание на используемое пространство имен: xmlns:svg="http://www.w3.org/2000/svg"> ;
- документ должен быть именно в xhtml формате (локально — это файл с расширением.xhtml)
- с кроссбраузерностью у этого метода плохо. Особенно плоха реакция IE;
- html код становится нереально грязным.
Сейчас этот метод лучше не использовать.
Заметка
IE, включая версии 8, не поддерживает SVG. В то время Microsoft активно продвигал свой формат — VML. Потому с этим браузером придется повозиться, чтобы увидеть и там SVG-изображение (об этом подробней в следующих статьях).
Светлое будущее
По видимому в скором будущем формат SVG основательно войдет в жизнь веб разработчиков. В подтверждение этому уже сейчас можно встретить описания интересных способов внедрения SVG. По заявлениям разработчиков браузеров, новые версии их творений будут поддерживать часть или все из ниже приведенных способов интеграции SVG.
9 ответов
Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.
Если вы хотите изменить изображение SVG, вы должны загрузить его, используя
Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
Вы можете встроить SVG, пометить ваше резервное изображение именем класса (my-svg-alternate):
А в CSS используйте класс no-svg от Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js), чтобы проверить поддержку SVG. Если поддержка SVG отсутствует, блок SVG будет игнорироваться, и изображение будет отображаться, в противном случае изображение будет удалено из дерева DOM (display: none):
My-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); }
Затем вы можете изменить цвет вашего встроенного элемента:
#time-3-icon { fill: green; }
Чтобы изменить цвет любого SVG, вы можете напрямую изменить код svg , открыв файл svg в любом текстовом редакторе . Код может выглядеть следующим образом:
Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т.д. . Там вы можете добавить свой собственный цвет с помощью атрибута style . Посмотрите на приведенный ниже пример
Добавьте атрибут стиля ко всем тегам, чтобы вы могли получить свой SVG требуемого цвета
Шаги, которым я следую, чтобы изменить любой цвет SVG:
- Сначала добавьте изображение SVG с помощью тегов img
- Используйте следующий чтобы преобразовать любой код цвета HEX для фильтрации:
Например, вывод для # 00EE00 :
Filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
Самый простой способ - создать шрифт из SVG, используя службу, например https://icomoon.io/app/#/select или таковую. загрузите SVG, нажмите "сгенерировать шрифт", включите файлы шрифтов и css в свою сторону и просто используйте и создавайте его, как и любой другой текст. Я всегда использую его так, потому что он упрощает стилизацию.
РЕДАКТИРОВАТЬ: Как упоминалось в статье , прокомментированной символами @CodeMouse92, испорченными скриншотами (и возможно, плохо для SEO). Так что скорее придерживайтесь SVG.
Только SVG с информацией о пути . Вы не можете сделать это с изображением... как путь вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор
Итак: с помощью CSS вы можете перезаписать значение fill пути
Path { fill: orange; }
но если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда есть некоторый эффект зависания.. используйте
Path { fill: currentcolor; }
body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: "Helvetica"; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; }
Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
S
calable
V
ector
G
raphics -
масштабируемая разметка в
екторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.
Формат SVG имеет ряд достоинств:
SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.
Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.
SVG - открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.
Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.
Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.
И несколько недостатков, куда же без них:
-
Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.
Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.
Пример SVG кода:
Исполнение данного кода:
В даном изображении можно просто изменить параметры в коде. Для примера - картинка с изображением занимает 35.5 КБ, а код SVG - 426 байт.
И вот мы плавно подошли к разговору использования SVG-анимации (SMIL). SVG-графику можно анимировать с помощью нескольких анимационных элементов. Например, с использованием таблиц стилей CSS.
Так зачем же разработчику использовать SMIL? Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.
Целевой объект анимации задается с помощью xlink:href.
Если атрибут xlink:href не задан, то целевым элементом становится родительский элемент:
Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.
Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера:
В течение 5 секунд (dur="5s"), после клика на синий круг (begin="click"), он будет двигаться по оси Y, начиная с точки from="300" в точку to="100". После выполнения - анимация остановится в конечной точке (fill="freeze"). Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount="indefinite".
Также, можно задать начало выполнения анимации после загрузки страницы. Или же подключить функцию по истечению некоторого времени после загрузки, добавить анимацию элемента страницы с задержкой после клика и тому подобное.
В действительности, SVG-анимация очень большая тема. Можно написать огромную статью с примерами кода и их выполнением, но, вместе с тем, некоторые возможности остаются недоступными. В том числе - анимация текста. Но это уже совсем другая история, исследовать которую мы будем в следующих статьях блога.