10 прекрасных библиотек c SVG-иконками
Мы проверили все условия лицензирования, так что можете не сомневаться – библиотеки из этой подборки общедоступны. И, что немаловажно, каждая обладает привлекательным дизайном.
Даже не сомневаюсь, что многим из вас уже приходилось использовать иконки из Font Awesome, потому что среди первых открытых библиотек она стала одной из самых популярных. Сейчас в галерее Font Awesome содержится больше 1500 бесплатных и почти 7850 платных иконок.
Библиотека предлагает обширную и многообразную коллекцию иконок, что и сделало ее такой востребованной. Кроме того, у пользователей есть возможность создать персональную CDN-ссылку (необходимо наличие аккаунта на данном сервисе). Благодаря этому можно с помощью задания условий исключать обычные иконки и пользоваться только двухцветными. Естественно, можно включить несколько иконок, просто скопировав SVG-код напрямую. Рекомендуем делать так в тех случаях, когда вам для сайта нужно не больше 2-3 десятков значков.
Ссылки:
- Страница для начала работы.
- Demo.
- Github.
Эта библиотека SVG тоже открытая, содержит больше 450 иконок, разделенных на 3 разных стиля. Особенно привлекательным на наш взгляд является простой контурный дизайн.
Работа с Ionicons включает хорошую документацию. Когда вам требуется вся библиотека, а не отдельная иконка, включите в футер (нижний элемент страницы) такой скрипт:
Дальше вам останется просто вписать нужный элемент в код HTML, указав в атрибуте “name” иконку, которую нужно показать, например:
Ссылки:
- Официальный сайт;
- Demo;
- Github.
Активные пользователи Reddit наверняка знают о появлении новой библиотеки CSS.gg, в которой для стиля используется только CSS. Сейчас в ней больше 700 иконок, рассортированных по разным категориям: стрелки, кнопки, значки, код, музыка и др.
Первое время было много споров вокруг производительности: с данной точки зрения лучше использовать CSS или все-таки SVG? Однако позднее во II версию создатель библиотеки включил не только SVG, но и другие форматы: Adobe XD, SVG Sprite и Figma, предоставив пользователям еще больший выбор.
Приступить к работе с библиотекой иконок совсем не сложно. После выполнения команды «npm -i css.gg
» добавьте в тег head такую таблицу стилей:
Кроме того, есть альтернативы CDN: UNPKG и JSDelivr:
Ссылки:
- Demo.
- Github.
Эта библиотека содержит всего 282 SVG-иконки, зато внешне она очень привлекательна и будет понятна даже новичкам. Основным форматом по умолчанию стоит SVG, потому что сейчас это самый скоростной способ использования значков.
Есть возможность настраивать параметры иконок до загрузки (размер, цвет и пр.), и включать либо темный, либо светлый режим с помощью кнопки с изображением луны, расположенной с правой стороны вверху сайта.
Чтобы начать работать с Feathericons, нужно загрузить SVG-файл и добавить его в свою разметку.
- Demo.
- Github.
В набор Eva Icons входит 480 качественных SVG- и PNG-иконок с открытым доступом. Выполнены они преимущественно в одном из двух стилей: заливной или контурный. Нельзя не отметить отличную возможность добавить любой анимационный эффект значку, просто наведя на него курсор мыши: к примеру, пульсацию, изменение размера, вибрацию и др.
Чтобы приступить к работе с библиотекой, загрузите SVG или PNG файл после выбора значка или загрузки набора иконок целиком. Кроме того, можно установить пакет npm: npm i eva-icons
.
Ссылки:
- Demo.
- Github.
Open source библиотека от авторов Tailwind CSS. Состоит из 165 иконок разных стилей с возможностью выбрать темную или светлую версию любого элемента. Дизайн значков проработан очень искусно.
Для использования иконок в своих проектах нажимайте на них, чтобы скопировать встроенный SVG-код. Обратите внимание, что библиотека доступна в Figma. При необходимости включить весь набор иконок, нужно загрузить с репозитория SVG-файлы.
Ссылки:
- Демо.
- Github.
Эта библиотека предлагает вам больше шести сотен пользовательских иконок и, к тому же, по нашему мнению, выгодно выделяется среди аналогов благодаря отличному дизайну.
Чтобы начать работу, скопируйте SVG-код, а затем используйте его любым удобным способом (инструкцию можно посмотреть на сайте).
Ссылки:
- Demo.
- Github.
Довольно большая коллекция, включающая больше 2 тысяч красивых иконок. Они сгруппированы по категориям: дизайн, бизнес, документы, общение, девайсы и др. Эта открытая библиотека определенно заслуживает внимания.
Если решили использовать Remix Icon, можете или загрузить версии SVG/PNG, или копировать в клипборд встроенный SVG-код. А еще некоторые предпочитают скачивать пакет целиком в виде одного файла с расширением .svg либо спрайта.
Ссылки:
- Demo.
- Github.
Здесь есть больше сотни иконок, которые используются на основном сайте Github. Есть информация, что уже идет работа над следующей, второй версией Octicons, с улучшенным дизайном и большим разнообразием иконок.
Большим преимуществом библиотеки является то, что ею можно пользоваться как полноценным пакетом в таких языках, как React, JS, Ruby и Rails.
Ссылки:
- Перечень всех пакетов, которые нужны для начала работы с библиотекой.
- Demo.
- Github.
В завершение списка идет не менее интересная, чем предыдущие, библиотека Ikonate, в которой есть около сотни качественных иконок, выполненных в лаконичном плоском дизайне. Ее лицензия MIT достаточно лояльна.
Перед экспортом пользователь может без труда настраивать размер, параметры границ и цвет иконок. Результирующий ZIP-файл будет содержать HTML-документ со всеми значками, которые вы выберете, папку отдельных SVG-файлов, а также спрайт-лист.
Ссылки:
- Demo.
- Github.
Перевод статьи Zoltan Szogyenyi: 10 open source SVG icon libraries that you can use for your next project
Поиск способов чистого экспорта иконок в .svg из Sketch …корректный метод
Если вы разрабатываете дизайн интерфейсов, скорее всего, вам приходится каждый день работать в команде с программистами.

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> http://www.w3.org/2000/svg» xmlns:xlink=”http://www.w3.org/1999/xlink» xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns»> <! — Generator: Sketch 3.3 (11970) — http://www.bohemiancoding.
com/sketch → add Created with Sketch.
Большая часть этого кода бесполезна и нам не нужна. По сути, нам нужны только и . Остальную часть мусора можно выкинуть, потому что все это можно контролировать посредством css глобально для всего набора, а не настраивать каждую иконку индивидуально. Тогда настоящей головной болью были , и . Что бы я ни делал, Sketch все равно экспортировал эти атрибуты. Это была настоящая проблема, потому что как только вы открываете .svg в html, иконка портится. Особенно, если манипулировать иконкой так, как это делаем мы. Sketch генерирует целую кучу беспорядочного кода. Чтобы решить проблему, нужно вернуться назад и пройти каждый шаг снова, чтобы отыскать решение. Так как же все-таки иконки экспортируются в Sketch? Все довольно просто, и я нашел три способа сделать это. Но, есть только один верный способ экспортировать чистый код .svg. Давайте проанализируем некоторые возможные решения:
- ) Можно создать артборд для каждой иконки, которую нужно экспортировать
- ) Использовать инструмент нарезки и нарезать все по нужным размерам
- ) Выделить несколько иконок на одном большом артборде, кликнуть и экспортировать в формат .
svg
*примечание: Вы можете перейти в Layers > Path > Flatten и попробовать этот способ, но Sketch никогда не активировал опцию после выделения иконки.
1.) Создайте артбордСоздайте артборд с точным размером иконки для экспорта. Легко, правда? Это был мой первый способ, самый простой. Для этого примера я создал артборд 24 x 24 пикселя. Кликнул на экспорт, и вот что произошло:
<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> http://www.w3.org/2000/svg» xmlns:xlink=”http://www.w3.org/1999/xlink»>
Откуда ни возьмись, появились viewBox, transform, и translate. Проблема в том, что мне это все не нужно.
И появляется баг #1. Во-первых, позиция 400.5 и -416.2. Проблема: Sketch экспортировал параметр transformation (преобразование). Я заметил, что позиция моего артборда была 400.5 x и -416.2 y. И это стало проблемой. Все артборды должны быть pixel-perfect. А поскольку позиция моего артборда таковой не была, Sketch экспортировал следующее: [dt_code][/dt_code] Без понятия, откуда взялось 0.800000, но в любом случае, нам такое не нужно. Решение: Выбирайте позиции на четных числах. Это поможет избежать любых преобразований в коде. Кроме того, так как позиция была смещена полупикселями, Sketch изменил размер моей области просмотра на 0 0 25 25. Мой артборд изначально был 24 x 24 пикселя. Этот баг даже добавил параметров в код.
Удалите границы для чистого кода Проблема: По дизайну каждая иконка была размером width: 24px , height: 24px, и border-radius: 3px. Проблема возникала при экспорте, добавлялся прямоугольник границ, и в css не получалось нормально масштабировать иконки. [dt_code][/dt_code] Решение: Удалите любую прозрачную граничную рамку, и пусть css творит свою магию. Всем разработчикам нужно, чтобы параметр viewbox был равен 24 x 24px. Они сами могут добавить ширину, высоту и border-radius.
Проблема: Sketch экспортирует поворот (-180.000000).
Чтобы легко воссоздать иконку со стрелочкой, я повернул каждую иконку на 90 градусов, чтобы получить все четыре варианта. Каждый раз, когда вы вращаете что-то в Sketch, добавляется соответствующий атрибут. Если вы уберете вращение в Sketch, иконка автоматически вернется в свое первоначальное положение. И так все возвращается на круги своя, и я опять нет нужного решения. Решение: Откройте свою иконку .svg в Illustrator, поверните ее, а затем перетащите мышкой обратно в Sketch. Это вообще решит все проблемы с поворотом. *примечание: Я бы с легкостью экспортировал эту иконку из Illustrator, но Adobe также генерирует кучку фигового кода при экспорте. Плюс, я уже вдоль и поперек перекопал Sketch в поиске решения.
2.) Использование инструмента Slice Проблема: еще больше мусора (translate и transform), потому что позиция каждой иконки привязана к артборду. И вот что Sketch экспортировал:
<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> http://www.w3.org/2000/svg» xmlns:xlink=”http://www.w3.org/1999/xlink»>
Решение: Его нет. Просто не делайте так. На слайсинг уходит слишком много времени, причем безрезультатно.
3.)Выделите любую иконку и экспортируйте ее в .svgПросто выделите все иконки и экспортируйте в .svg Проблема: Такие же проблемы с transform и translate в коде. Это очень мешает, если вы хотите полный контроль иконок в css. Решение: Опять же, сэкономьте себе время и просто не делайте так.
Верный способ после всех экспериментов- ) Создайте артборд для каждой иконки.
- ) Убедитесь, что позиция каждого артборда не содержит полупикселей, и описывается четными числами.
- ) Удалите все повороты иконок.
- ) Уберите все граничные рамки, чтобы Sketch не пришлось экспортировать ненужный код.
Чистый .svg экспорт выглядит так:
<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?> http://www.w3.org/2000/svg» xmlns:xlink=”http://www.w3.org/1999/xlink»>
Откиньтесь на спинку кресла, расслабьтесь и выпейте пива, чтобы смыть все свои печали. Надеюсь, что Sketch разберется и выдаст решение для этой проблемы, потому что сам продукт я люблю всем сердцем.
От нашего пользователя Александра Шовтюка:
Хотел добавить, что можно пойти еще дальше и автоматизировать процесс очистки и оптимизации СВГешек в проекте, чему фронт-енд разработчики будут только рады. Для этого понадобится таск-раннер, к примеру Grunt и несколько толковых плагинов https://www.npmjs.com/package/grunt-svgstore (свг спрайт) https://github.com/sindresorhus/grunt-svgmin (минифкация) Хотя можно юзать и GUI https://github.com/svg/svgo[/dt_quote]
Перевод статьи Sean Kesterson
Как собрать пакет иконок из фигмы — 3
Я уже писал как собрать пакет иконок в виде шрифты из скетча. На этот раз из фигмы, в виде svg-спрайта и многоцвете. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».
Что вообще происходит
У дизайнера есть несколько разных способов передать иконки разработчику:
- отдельными файлами или спрайтом в png,
- отдельными файлами или спрайтом в svg,
- иконочным шрифтом.
На формат распространения накладываются и другие ограничения:
- платформа: веб, десктоп, мобильные
- цветность: монохромные, двухцветные, полноцветные
- dpi экранов
и прочее
Если вам нужен скетч, смотри прошлую серию
Разработчики фронтенда просят все время какие-то шрифты, svg-файлы или спрайты. Иногда фронтенд говорит совсем непонятные слова: закоммить в гит, пойду соберу пакет в нпм, давай настроим в сиай. Расскажу как все это сделать, никого не замучив. Понадобится фигма.
Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.
Зачем это делать, есть же фонтелло
Есть много готовых сервисов, которые собирают шрифт по загруженным svg-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:
Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.
Хорошее решение — простое, в нем минимум ручных действий.
Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы svg и файлы шрифта, кто собирает и кому передает, как не забыть иконку.
Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.
Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.
Хорошее решение встраивается в процесс разработки.
Не всех устраивает внешний сервис. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.
Хорошее решение работает внутри компании.
Формируется не всё, что надо. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.
Если не формировать вместе со шрифтом less-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.
Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.
Новое в этой версии  
Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и less-файл, а также опубликовать пакет в npm-репозиторий.
Сегодня — вариант для фигмы. Еще в нем появились svg-файлы и svg-спрайт. Иконки svg-спрайта поддерживают двухцветность и перекрашивание средствами css.
Куда смотреть
Я сделал:
- github.com/mikeozornin/some-icons — тестовый репозиторий
- figma.com/file/UaWytmrubMDjIpJnlMn03x/Some-icons-pack — тестовый фигма-файл
Чтобы сборка завелась, нужно подготовить токен доступа к фигме, ищите в профиле вот такое:
После этого действуйте по инструкции в Readme. md
Сборщик обращается к фигме, через веб-апи экспортирует svg-файлы, запускает сборку шрифта и svg-спрайта.
Я не очень пойму, что ещё комментировать, мне кажется, там все понятно и очевидно, поэтому вставляю только результат:
КДПВ
Было:
Стало:
Разные особенности
Как работает двухцветность спрайтовых иконок
Для двухцветности иконок в svg-спрайте и возможности перекрашивания их через css используется своеобразных хак.
<svg fill="#000" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path d="M8.62155 1.21658C8.45088 1.08099 8.2349 1 8 1C7.44771 1 7 1.44772 7 2C7 2.55228 7.44771 3 8 3C4.1554 3 3.80482 5.42796 3.08886 10.3863C3.05992 10.5868 3.03039 10.7913 3 11C2.51458 11 2.02917 11.3534 1.54375 12.0603C1.4751 12.1603 1.43835 12.2787 1.43835 12.4C1.43835 12.7314 1.707 13 2.0384 13L6.58534 13C6.53007 13.1564 6.5 13.3247 6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5C9.5 13.3247 9.46992 13.1564 9.41465 13L13.9616 13C14.0829 13 14.2013 12.9633 14.3013 12.8946C14.5745 12.707 14.6439 12.3335 14.4562 12.0603C13.9708 11.3534 13.4854 11 13 11C12.9668 10.775 12.9346 10.5547 12.9031 10.3391C12.7783 9.48499 12.6644 8.70518 12.5409 7.99982C12.5273 7.99994 12.5137 8 12.5 8C11.9617 8 11.4454 7.90547 10.9669 7.7321C11.0539 8.18151 11.1391 8.69127 11.2279 9.26906C11.2687 9.53513 11.3106 9.81613 11.3674 10.204C11.3589 10.146 11.4807 10.9794 11.5161 11.219L11.5575 11.5h5.44301L4.48435 11.2161C4.50903 11.0466 4.57528 10.5882 4.6098 10.3494L4.63087 10.2036C4.68629 9.8214 4.72807 9.5381 4.7686 9.27157C5.39203 5.17234 5.83807 4.5 8 4.5C8.03774 4.5 8.07495 4.50021 8.11166 4.50065C8.03858 4.17884 8 3.84392 8 3.5C8 3.33101 8.00932 3.1642 8.02746 3.00004C8.09885 2.35473 8.30674 1.75013 8.62155 1.21658Z"/> <circle cx="12.5" cy="3.5" r="2.5" fill="currentColor"/> </svg>
Это — код двухцветной иконки. Обратите внимание, что fill у svg стоит #000, а у части иконки, которую нужно красить отдельно, стоит fill=«currentColor».
Для перекрашивания применяется правило:
svg { fill: #8F99AA; /* Цвет основной части*/ color: #E80E0E; /* Цвет дополнительной части*/ }
В результате этого правила у svg появляются два свойства: fill и color. Fill перекрашивает всю иконку, а color ни на что не влияет. У вложенной фигуры срабатывает свой fill, но он берет цвет из специальной переменной currentColor, которая залинкована на атрибут color у svg. В итоге атрибут color у svg не влияет на базовую контур, а используется только чтобы прокинуть внутрь дополнительный цвет.
Такая особенность нужна только для спрайта. Если вставить иконку прямо в DOM, то можно будет использовать любые нормальные способы (например, css-классы).
Зачем нужны CODEPOINTS
Ручное прописывание codepoints для символов нужно, чтобы при переборке шрифта не поехали коды символов. Если вы не собираетесь использовать TTF-шрифт, забейте и не используйте. Если вам нужен TTF-шрифт со стабильными кодами символами, придется выдавать их вручную.
Как лучше версионировать
У нас (вообще это не обязательно) пакеты версионируются по семверу (semver.org). Версии нумеруются в формате Major.Minor.Patch (например, 3.2.1: 3 — major, 2 — minor, 1 — patch).
- Major-версия обновляется при ломающих изменениях
Ломающие изменения говорят о том, что нельзя просто обновить иконку, нужно скорее всего будет менять код в продукте. Ломающие изменения описаны в changelog. Самый частый случай: переименования иконок, при обновлении пакета нужно заменить в продукте старое имя на новое. - Minor-версия обновляется при новых фичах: появление новой иконки, нового формата css и прочее.
Обновляться на новую версию можно безопасно, ничего сломаться не должно. - Patch-версия инкрементируется при багфиксах, исправлениях иконок и прочих мелких изменениях.
Обновляться на новую версию можно безопасно, ничего сломаться не должно.
Если есть вопросы, пишите в комментарии или на почту mike. [email protected]
Файл:How to use icon.svg — Путеводитель Викигид Wikivoyage
Материал из Wikivoyage
Перейти к навигацииПерейти к поиску
- Файл
- История файла
- Использование файла
- Глобальное использование файла
- Метаданные
Размер этого PNG-превью для исходного SVG-файла: 40 × 37 пкс. Другие разрешения: 259 × 240 пкс | 519 × 480 пкс | 830 × 768 пкс | 1107 × 1024 пкс | 2214 × 2048 пкс.
Исходный файл (SVG-файл, номинально 40 × 37 пкс, размер файла: 482 байт)
Этот файл из на Викискладе и может использоваться в других проектах. Информация с его страницы описания приведена ниже.
Краткое описание
ОписаниеHow to use icon.svg | Trademark License gear icon |
Дата | |
Источник | Bad SVG How to use.![]() |
Автор | Sarang |
Исходный код этого SVG-файла корректен.
Это векторное изображение было создано с помощью текстового редактора.
Previous version had been created with Adobe Illustrator (272 685 bytes) i now 0.17% of previous size
Please do not replace the simplified code by another version created with Inkscape or another vector graphics editor❗
Этот файл замещает файл How to use.svg. Рекомендуется использовать эту версию, а не замещённую. Bahasa Indonesia ∙ davvisámegiella ∙ Deutsch ∙ English ∙ español ∙ français ∙ italiano ∙ magyar ∙ polski ∙ svenska ∙ македонски ∙ മലയാളം ∙ português do Brasil ∙ русский ∙ 日本語 ∙ 中文(简体) ∙ 中文(繁體) ∙ +/− |
Difference
1″>New icon: better version | Old icon: really bad SVG |
- This icon was drawn to replace the old icon shown on the far right side.
- While the new icon is perfect symmetric, the old icon isn’t.
- It’s 8 gaps are of different widths, the topmost ones disappear.
- It is W3C-invalid and consists of embedded raster graphics,
- bloating it to a huge file size that can hold the size of
- the new one more than 565 times.
Лицензирование
Это изображение простых геометрических фигур не удовлетворяет требованиям, необходимым для возникновения защиты авторским правом, то есть находится в общественном достоянии (англ. public domain), потому что содержит лишь общеизвестную информацию и не является результатом творческой деятельности. |
История файла
Нажмите на дату/время, чтобы увидеть версию файла от того времени.
Дата/время | Миниатюра | Размеры | Участник | Примечание | |
---|---|---|---|---|---|
текущий | 18:27, 6 января 2015 | 40 × 37 (482 байт) | Sarang | better centered | |
15:01, 5 января 2015 | 40 × 37 (472 байт) | Sarang | {{Information |Description=Gear icon |Source={{F|How to use.svg}} |Date=2015-01-05 |Author={{Ut|Sarang}} }} |
Нет страниц, использующих этот файл.
Глобальное использование файла
Данный файл используется в следующих вики:
- Использование в fr.wikisource.org
- Wikisource:Scriptorium/2013
- Wikisource:Scriptorium/Novembre 2013
- Использование в meta.wikimedia.org
- Trademark policy
- Trademark policy/en
- Trademark policy/es
- Trademark policy/ar
- Trademark policy/ru
- Trademark policy/fr
- Trademark policy/de
- Trademark policy/ja
- Trademark policy/zh
- Trademark policy/it
- Trademark policy/he
- Trademark policy/id
- Trademark policy/tr
- Trademark policy/oc
- Trademark policy/hu
- Trademark policy/nl
- Trademark policy/ko
- Trademark policy/uk
- Trademark policy/bn
- Trademark policy/ro
- Trademark policy/ug-arab
- Trademark policy/pt
- Trademark policy/af
- Trademark policy/pt-br
- Trademark policy/so
- Trademark policy/diq
- Trademark policy/ur
- Trademark policy/cs
- Trademark policy/gl
- Trademark policy/sr
- Trademark policy/hi
- Trademark policy/el
- Trademark policy/ml
- Trademark policy/br
- Trademark policy/ps
- Trademark policy/sv
- Trademark policy/pl
- Trademark policy/hr
- Trademark policy/en-gb
- Trademark policy/eu
- Trademark policy/mk
- Trademark policy/sq
- Trademark policy/da
- Trademark policy/ca
- Trademark policy/fi
- Trademark policy/pa
- Trademark policy/arz
- Trademark policy/eo
Просмотреть глобальное использование этого файла.
Метаданные
Файл содержит дополнительные данные, обычно добавляемые цифровыми камерами или сканерами. Если файл после создания редактировался, то некоторые параметры могут не соответствовать текущему изображению.
Ширина | 40 |
---|---|
Высота | 37 |
Free Brush Stroke Clipart in AI, SVG, EPS or PSD
Free Brush Stroke Clipart in AI, SVG, EPS or PSDДанный веб-сайт использует файлы cookie. Продолжение просмотра данного веб-сайта означает ваше согласие на использование файлов cookie и других технологий отслеживания. Подробности здесь Понял!
Кисти
Painted grunge stripes set.
Black labels, background, paint texture. Brush strokes vector. Handmade design elements.
Мазки кисти гранж
Paint grunge backgrounds, brushstrokes
Кисть
Векторные кисти из нового света
Black brush strokes
abstract black and yellow grunge background design
Мазки кистью
Кисть с жидким картины
Различные цвета кисти 04
The painting ink is a brush paint.
Гранж кисти
Мазки кистью вектор
Handpainted Цветная кисть
Кисточка с цветом
Дамаск векторные кисти
Грязные кисти
Художник инструменты векторные иконки: Краски, кисти & живопись холст (бесплатно)
Modern black cover design set.
Creative art pattern with gold brush stroke, paint drop (spot) on black background
Кисти
Красные кисти
Абстрактные кисти краска брызги
Кисть краска
Различные цвета кисти 02
Различные цвета кисти 03
Set of strokes
Баннер инсульта кистью
Мазки кистью и рукописное письмо Векторный клипарт пакет
Set of Hand Drawn Grunge Brush Smears
Grunge black paint marker strokes vector
Кисти
2018-11-24 Brushes 2-4
Зеленые кисти
CMYK кисти
Кисти
Различные цвета кисти 01
Эффекты кисти Splash
Бесплатные Rmpl линии художественная кисть
Гранж текстуры
Grunge black paint marker strokes vector
Мазки кистью вектор
Хирагана Yokozawa с указанием порядка инсульта
Иконка кисти краски
Векторная кисть
Гранж кисти
Векторные кисти
CMYK кисти
Круглые кисти
Мазки краски
Grunge design elements
Краска кисти векторная кисть
Связанные запросы
- мазок кистью краска
- текстура обводки кистью
- штриха кисти
- парикмахерская кисть
- чистить зубы
- наотмашь инсульта
- щетиной
- художник кисть
- штрих код
- инсульт
- ручка инсульта
- ишемического инсульта
- женский инсульта
- кисти touchcard
- черная обводка
- ванна кисть
- бутылка кисть
- румян кисть
- краски и кисти
- чистите зубы
- кисть инсульта
- тепловой удар
- кисть границы
- ход игры
- молодые кисть
- краска инсульта
- аэрография
- груди инсульта
- чернила кисть
- баттерфляй
- художественная кисть
- обратно кисти
- большая кисть
- кисть
- кисти пакет
Как работать со значками SVG
Существует множество способов использования значков SVG в HTML и CSS, и я не пробовал их все. Вот как мы это делаем в нашей небольшой команде фронтенда в Kaliop. Он хорошо подходит для наших нужд, которые включают в себя:
- Контентные и коммуникационные веб-сайты, часто основанные на больших CMS, а не на полноценных веб-приложениях JS.
- Значки, которые часто представляют собой простые одноцветные значки (каждый потенциально может использоваться в нескольких разных цветах в зависимости от контекста и взаимодействия с пользователем). Двухцветные значки и градиентная заливка тоже возможны, но требуют немного больше работы. Поддержка
- IE11.
Эта статья доступна на французском и китайском языках. Большое спасибо переводчикам!
Подготовка значков
Когда вы получаете значок SVG от дизайнера или из инструмента дизайна (Illustrator, Sketch, Figma и т. д.), возникает соблазн просто добавить его в свой проект. Тем не менее, я считаю, что небольшая переделка в вашем любимом инструменте, чтобы убедиться, что точно соответствует , может избавить вас от некоторых головных болей и улучшить результат.
Работа с новым документом или монтажной областью
Создайте новый документ или новую монтажную область в своем любимом инструменте и скопируйте и вставьте значок в центр. Это отличный способ убедиться, что ваша иконка чиста и не имеет множества скрытых путей.
Квадрат проще
Ваш значок не обязательно должен быть квадратным , но с квадратными значками легче работать (если только ваш значок или графика не очень широкие или очень высокие).
Точные размеры имеют значение только в том случае, если вы хотите микроуправлять подгонкой пикселей (чтобы получить максимально четкие результаты на экранах с низким разрешением). Например, если все ваши значки могут поместиться на сетке 15 на 15 пикселей и в основном используются именно с такими размерами, продолжайте работать с монтажными областями или документами 15 × 15. Когда я не уверен, мне нравится размещать элементы на артборде 20×20.
Воздухопроницаемость по бокам
Оставьте немного места по краям, особенно для круглых форм. Браузеры используют сглаживание при рендеринге SVG-фигур, но иногда лишние пиксели от сглаживания визуализируются за пределами viewBox
и обрезаются.
Как правило, в значке размером 16 или 20 пикселей оставляйте 0,5 или 1 пиксель пустого пространства с каждой стороны. Кроме того, не забудьте экспортировать всю монтажную область, а не выбранные пути в центре, иначе вы потеряете это пустое пространство при экспорте.
Экспорт в SVG
- В Illustrator я просто использую «Сохранить как» и выбираю формат «SVG». (Может быть лучше использовать «Экспортировать как…» и выбрать SVG для оптимизированного результата.)
- В Sketch вы можете выбрать монтажную область, нажать «Сделать экспортируемым» в правом нижнем углу и выбрать «SVG» в качестве формата.
- В Inkscape вы можете «Сохранить как» и выбрать «Оптимизированный SVG».
Изучите SVG
Вам определенно следует изучить некоторые основы SVG, а также уметь читать и понимать структуру простых файлов SVG. В идеале вы должны знать о них:
- Группировка элементов:
- Визуальные элементы:
- Атрибуты стиля:
fill
,stroke
,stroke-width
.
Я обычно ищу их в DevDocs (который просто предлагает более удобный вид документов MDN SVG), когда хочу узнать больше. Вам не обязательно делать это прямо сейчас, и вы можете начать свое приключение с SVG, копируя и вставляя код, но со временем будет полезно узнать достаточно, чтобы понять код, который вы копируете.
Когда вы экспортируете SVG из инструмента дизайна, он часто будет иметь немного или много ненужной разметки, метаданных и тому подобного. Он также может иметь чрезмерно точные данные о пути (в атрибуте
d
). Попробуйте использовать такой инструмент, как SVGOMG, и сравните код до и после, чтобы увидеть, что было удалено или упрощено.
Удалить данные о цвете
Для одноцветных значков убедитесь, что:
- В исходном файле пути черные (
# 000000
). - В экспортированном коде нет
заполнения
атрибутов.
Если у нас есть жестко запрограммированные заливки в исходном коде SVG, мы не сможем изменить эти цвета в нашем коде CSS. Так что вообще лучше их удалить, по крайней мере для одноцветных иконок.
Illustrator не выводит атрибуты fill
для полностью черного контура ( # 000000
). Sketch делает это, поэтому вам, возможно, придется открыть экспортированный код SVG и вручную удалить атрибуты fill="#000000"
.
Создание спрайта SVG
В этой части много кода, но на самом деле она совсем не сложная. Мы хотим создать документ SVG, содержащий
элементов. Каждый
должен иметь атрибут id
, атрибут viewBox
и будет содержать элементы
значка (или другие графические элементы).
Я называю этот SVG-документ спрайтом (имея в виду спрайты в компьютерных играх и CSS), но его также можно назвать листом спрайтов или хранилищем символов.
Вот спрайт с одним значком:
Добавление значка к нашему спрайту
Допустим, Illustrator дал нам этот код для значка, показанного выше:
w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y= "0px" viewBox="0 0 15 15" xml:space="сохранить">
Мы можем немного упростить его (вручную или с помощью SVGOMG), сохранив только Атрибут viewBox
и основные данные:
Теперь мы можем скопировать и вставить его в наш спрайт. Нам нужно преобразовать элемент
в элемент
и вставить его вручную в наш спрайт:
1 5.2l-2.6-2.6-4.6 4.7-4.7-4.7-2.5 2.6 4.7 4.7-4.7 4.7 2.5 2.5 4.7-4.7 4.6 4.7 2.6-2.5-4.7-4.7"/>
Вы можете сделать это вручную для всех ваших значков, но есть инструменты, которые автоматизируют этот процесс. Мы используем gulp-svg-symbols (вот наша конфигурация gulp, если вам интересно), но есть несколько графических инструментов и инструментов командной строки, которые экспортируют спрайты символов SVG, включая Icomoon.
Совет для профессионалов: сохраните папку с исходными значками
Если вы создаете свой спрайт вручную, я рекомендую сохранить папку с отдельными значками SVG:
assets/ иконки/ крест.svg играть.svg поиск.svg ... общественный/ спрайт/ icons.svg
Тогда, если вам нужно перестроить icons.
или изменить отдельный значок, у вас есть правильные источники для работы. Будьте осторожны, чтобы ваш спрайт и исходная папка не рассинхронизировались. svg
Конечно, если вы используете процесс сборки (с помощью Gulp, Webpack или чего-то еще), вы можете передать ему свою исходную папку и позволить ему построить спрайт напрямую.
Важно: не все является иконкой
То, что что-то является SVG, не означает, что оно должно быть внутри вашего SVG-спрайта. Например:
Иллюстрации, которые вам не нужно стилизовать: сохраните как один файл SVG и включите его на свою страницу с
Иллюстрации, которые вы хотите анимировать: рассмотрите возможность встраивания полного кода SVG в вашу HTML-страницу, чтобы вы могли выбирать и стилизовать определенные группы, контуры или фигуры, анимировать некоторые части и т. д.
Как правило, если это большая иллюстрация, которую нужно отобразить с разрешением 100 на 100 пикселей или намного больше, или если она содержит десятки элементов, это может быть не «значок». Вероятно, это также увеличило бы размер вашего спрайта.
Добавление значков на ваши страницы
Плохая новость заключается в том, что для того, чтобы использовать наши значки SVG, мы должны изменить наш код HTML. Никаких фонов CSS, никаких псевдоэлементов ::before
. Наименее подробный HTML-код, который мы можем использовать:
Что может выглядеть так:
Значок SVG без стиляТеперь мы собираемся сделать этот HTML-код немного более подробным, чтобы его было легче стилизовать, а также сделать его более доступным. Сначала я покажу несколько общих шаблонов, а затем мы объясним каждый технический выбор.
Шаблон A: чисто декоративный значок
Шаблон B: ссылка или кнопка со значком и текстом
svg#newspaper"> Последние новости
Шаблон C: ссылка или кнопка со значком
Это то же самое, что и (B), но мы хотим показать только значок. Мы по-прежнему должны сохранять текст, чтобы пользователи программ чтения с экрана могли его прочитать.
Последние новости
Шаблон D: значок и замещающий текст вне ссылки или кнопки
Например, если у нас есть столбец таблицы со значками, представляющими «Да» и «Нет»:
Да