Логотип в svg как сделать
Добавил пользователь Morpheus Обновлено: 05.10.2024
× Предупреждение: Вы ввели верный пароль, но он не снимает ограничение на редактирование файла. Введите пароль с соответствующими правами доступа.
Бесплатный он-лайн конвертер позволяет конвертировать изображения в формат SVG (Scalable Vector Graphics) (внимание! бета-версия конвертера). Вы можете как загрузить файл, так и указать ссылку на изображение. Вы также можете наложить цифровые эффекты.
В случае конвертирования растровых изображений (PNG или JPG) в формат SVG произойдет преобразование ваших форм и объектов в черно-белую векторную графику, которая масштабируется без какой-либо потери качества. Такие изображения могут быть раскрашены с помощью бесплатных программ по работе с векторными изображениями (Inkscape и др.). Фотографы в большинстве случаев не добьются желаемого результата при конвертировании растрового изображения в формат SVG.
Если вы конвертируете в формат SVG какое-либо векторное изображение (например, формата eps или ai), конвертер попытается сохранить все векторные и цветовые данные, а также обеспечит максимально возможную схожесть двух файлов.
Конвертер формата Scalable Vector Graphics (SVG) позволяет вам конвертировать файлы более чем 130 форматов. Для получения большей информации о формате перейдите по ссылке.
Векторная графика помогает сделать дизайн сайта уникальным и масштабируемым. На примере простого значка мы расскажем о процессе создания и анимации изображений в популярном формате SVG.
Использование SVG для стилизации веб-сайтов открывает целый мир новых возможностей. Это отличный способ сделать дизайн уникальным и удобным для пользователей. Одно из самых больших преимуществ SVG – его гибкость и возможность изменять внутренние элементы изображения при помощи CSS. Вы можете создавать многоцветные значки и иллюстрации, а также анимировать их с помощью JavaScript или все того же CSS. SVG – векторный формат. Он масштабируется без потери качества, а правильно оптимизированная картинка мало весит. На примере небольшой иконки мы рассмотрим, как нужно работать с такими изображениями.
Создание SVG
Самый простой способ создать SVG – написать код:
Мы возьмем Illustrator. Как в любом приложении для работы с векторной графикой, большинство клиентских логотипов или иллюстраций представлены здесь в виде файлов AI, поэтому их можно легко открыть и экспортировать в SVG.
Для начала нужно создать новый веб-документ:
Размер холста – 400х400 пикселей. Размер на самом деле не имеет значения, потому что это вектор, но лучше оставить его в пределах, которые вы ожидаете увидеть в браузере. Будет легче поддерживать размер штриха и менять его, по сравнению с базовым. Далее создадим значок:
Важное практическое правило: чем меньше параметров, тем лучше! Так ваш код SVG будет чище и легче. Вы сделаете меньше ошибок, если не будете пытаться построить слишком сложные формы или рисованные иллюстрации.
При построении изображения можно использовать штрихи, различные цвета и даже градиенты. Все это будет экспортировано в SVG. Если вы планируете анимировать отдельные элементы значка, необходимо назвать слои и группы:
После экспорта имена будут преобразованы в идентификаторы: это будет полезно для более сложных иллюстраций. Лучше всего изменить идентификаторы на классы для внутренних элементов. Вы по-прежнему сможете использовать идентификатор для основного элемента , но им будет легче управлять, если пути и формы имеют классы.
Экспорт и оптимизация SVG-файлов
Когда значок будет готов, нужно экспортировать его в SVG. Для этого перейдите в: Файл -> Экспорт -> Экспортировать как .
Затем перед вами появится окно с параметрами для кода SVG:
После выбора опций экспортированный код значка выглядит примерно так:
Теперь необходимо изменить идентификаторы внутренних элементов на классы и добавить некоторые атрибуты для лучшей доступности:
Файлы SVG не занимают много места, что может улучшить скорость загрузки страницы. Если вы хотите еще больше их оптимизировать, попробуйте отличный инструмент – SVGOMG .
Вы можете загрузить в него файл SVG и получить множество дополнительных опций его тонкой настройки. Будьте осторожны: если вы зайдете слишком далеко в настройке изображения, нарушите дизайн. Если у вас уже есть стили или анимация, убедитесь, что не потеряете после оптимизации классы и элементы.
Анимация и манипуляции с CSS
После добавления кода SVG на страницу, необходимо стилизовать его как и любой другой элемент HTML. Например так:
Вы без труда найдете множество библиотек JavaScript (Svg.js, SnapSVG) для создания сложных анимаций, однако в большинстве случаев добиться интересного эффекта можно, используя только свойства opacity, scale, translate и colors.
Далее создадим простую анимацию для круга:
Это простая масштабная анимация в сочетании с непрозрачностью. Если у вас есть несколько значков с похожим кругом, вы можете повторно использовать тот же код, что сэкономит много времени и усилий. Именно поэтому использование классов для отдельных элементов предпочтительнее уникальных идентификаторов.
Теперь посмотрим на анимацию значка галочки:
Дальше немного сложнее. Здесь мы используем stroke-dasharray и stroke-offset , чтобы создать эффект отрисовки значка. Подробнее этот метод описан в специальном руководстве . Также мы применяем масштабирование и меняем цвет обводки: как видите, код очень простой, но он дает довольно интересный эффект:
Результаты наших экспериментов можно увидеть здесь .
Мы привели очень простой пример, однако он показывает потенциал SVG для веб-проектов. Есть много разных способов использования популярного формата изображений и векторной анимации. Также существует неплохая спецификация этого, по сути, языка разметки XML и несколько справочников SVG-элементов и SVG-интерфейсов , с которыми читателям будет полезно ознакомиться.
Доброго дня всем читателям. Небольшой набор качественной анимации, присутствующей на вашем сайте, должен вызвать положительные эмоции у ваших посетителей, ведь весь интернет медленно движется в сторону использования HTML5 для веб-анимации, но, стоит помнить, что ее использование также может привести к возникновению некоторых сложностей.
SVG (масштабируемая векторная графика) дает нам неплохую альтернативу, так как позволяет использовать великолепный API среди прочих преимуществ, и такую графику можно анимировать, используя капельку CSS-креатива.
В этой статье мы научим вас работать с SVG и комбинировать этот формат с CSS для создания анимированного логотипа.
Почему масштабируемая векторная графика такая классная
Несмотря на свое название — Scalable Vector Graphics, это вообще не графический формат, а язык XML-разметки (очень похоже на XHTML или XOXO). Этот специфический язык разметки используется для создания векторных двухмерных изображений, которые можно уменьшать или увеличивать без потери резкости. Перед тем как мы начнем говорить о его свойствах, давайте посмотрим на код, лежащий за простым SVG-файлом, Пример ниже воссоздает копию лого Adobe, используя для этого векторную обводку и атрибут заполнения для раскрашивания. Вы можете спокойно скопировать эту картинку, используя ваш любимый текстовый редактор (сохраняем, как файл .svg).
Как вы можете заметить, такие изображения, изменяющие свой размер без потерь качества, могут пригодиться при строительстве отзывчивого сайта. Как бы то ни было, если графические изображения векторные, то, когда речь идет о сложных изображениях, они требую неоправданно большое количество данных. Из-за этого факта, SVG широко используется только в логотипах, инфографиках или обычных графиках.
Кроме того, вы также можете использовать встроенные графические эффекты (например, фильтры или режимы смешивания), а также доступный DOM API. Если вы уже знакомы с CSS и JavaScript, то вам будет просто управляться с файлами SVG. Их гибкость позволяет вам, например, создавать SVG-файлы на стороне сервера и модифицировать их, не имея доступа к специальным инструментам (о которых мы поговорим позже).
SVG можно легко анимировать, используя CSS, но сначала давайте узнаем, как работать с SVG, используя специальные инструменты.
Как работать с SVG
Как упоминалось выше, вы можете работать с SVG и голыми руками, но зачем, если есть замечательные инструменты для создания и манипулирования SVG-файлами, которые позволяют ограничить работу с кодом простым редактированием CSS и анимации.
Adobe Illustrator, Inkscape и Sketch для Mac – это самые популярные решения. В случае с Illustrator процесс создания файлов очень прост, так как готовые изображения можно экспортировать, используя опцию ‘Save as’ SVG. В процессе сохранения вы можете заметить опцию, которая называется SVG Profiles, с несколькими вариантами, перечисленными в выпадающем меню: SVG Tiny (лучше всего подходит для смартфонов) и SVG Basic(профиль, который используется для PDA), но мы будем использовать SVG 1.1.
Единственный минус использования данных инструментов заключается в том, что они добавляют много метаданных в сопутствующий код, что приводит к созданию слишком тяжелые файлов. Так что масштабируемую векторную графику в большинстве случаев нужно оптимизировать перед тем, как использовать ее на своем сайте.
Давайте рассмотрим в качестве примера SVG-файл с Android-лого до и после оптимизации:
Мы удалили пробелы, дефолтные атрибуты, стили и прочие ненужные данные, и вот, что получилось:
Хотя исходный файл SVG и так был вполне компактен для начала работы (0.5kB), процесс оптимизации позволил уменьшить размер файла на 12.5% (стало 0.4kB). В случае более сложных изображений, вы заметите более внушительное уменьшение размера фала и увеличение скорости загрузки сайта при наличии там SVG-элементов.
Для упрощения этого процесса мы советуем использовать инструменты типа SVG Optimizer (доступен онлайн) и SVGO, который использует app. с открытым исходным кодом и создан на базе Node.js.
Теперь давайте посмотрим, как мы можем использовать CSS для анимации графики, созданной с использованием этого языка разметки.
Создание анимированного лого с использованием SVG и CSS
SVG имеет нативный синтаксис исключительно для анимации, который называется SMIL и позволяет вам анимировать атрибуты вашей графики напрямую с использованием XML-разметки.
Но, стоит заметить, что Internet Explorer никогда не предоставлял поддержку для SMIL, а разработчики Chrome говорят об отказе от поддержки этого синтаксиса в пользу CSS и веб-анимации.
Давайте взглянем на некоторые примеры. Помните SVG Adobe-лого, которое мы представили ранее? Мы будем использовать простую мигающую анимацию и эффект перехода для изменения его цвета. Мы начнем с обозначения класса векторного контура, а затем добавим эффекты в этот класс в наш файл стилей. Вот как будет выглядеть HTML:
SVG - масштабируемая векторная графика.
Сама по себе технология SVG - это очень объёмная тема - подробнее с ней можно познакомится на MDN Web Docs
В данной статье мы будем использовать иконки созданные по технологии SVG. Их отличие в том, что при изменении размеров они не теряют качества отображения, при этом весят обычно меньше, чем аналогичная иконка в другом формате, например PNG
Аналогичные иконки при масштабировании в формате SVG и PNG
Способы использования SVG-иконок
SVG-иконки можно использовать несколькими способами
1й способ - сохранить SVG-иконку как файл, и подключать как обычное изображение
При таком способе подключения, SVG-иконка будет масштабироваться без потери качества, но нельзя будет задать цвет иконки через CSS, и следовательно не получится плавно менять цвет иконки при наведении. И если в другом месте нужно будет использовать эту же иконку в другом цвете, необходимо будет создавать дополнительный файл SVG иконки
2й способ - открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.
Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании
3й способ - самый оптимальный способ использовать SVG-иконки - сделать символьный SVG-спрайт. При таком способе каждая иконка отрисовывается всего один раз в скрытом блоке, а затем может быть использована неограниченное количество раз, ссылаясь на уже отрисованную иконку. При этом, одной и той же иконке в разных местах можно задавать свой цвет через CSS, следовательно не нужно дублировать иконку и можно делать плавное изменение цвета при наведении.
Этот способ и рассмотрим подробнее
Создаём и используем символьный SVG-спрайт
Символьный SVG-спрайт - это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке
Первая часть - символьный SVG спрайт
Вторая часть - код использования
Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах
Добавим стили
Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться
Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke
fill - заливка иконки
stroke - цвет обводки
Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию
Получаем следующий результат
Итоги
Использование SVG-иконок имеет несколько преимуществ - возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.
В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки
Читайте также: