Разное

Иконки свг: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

06.01.1982

Содержание

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.
Эта библиотека предлагает вам больше шести сотен пользовательских иконок и, к тому же, по нашему мнению, выгодно выделяется среди аналогов благодаря отличному дизайну.
 
 При желании использовать Bootstrap в качестве CSS-фреймворка, рекомендуем добавить в свой проект библиотеку Bootstrap 5 Icons.
Чтобы начать работу, скопируйте 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 …корректный метод
Если вы разрабатываете дизайн интерфейсов, скорее всего, вам приходится каждый день работать в команде с программистами.
 
 Ваша работа также состоит в решении всевозможных проблем. Вы находите способы решать проблемы визуально и логически. Лично я, как и многие, люблю сесть с командой UI-разработчиков и разобрать их логику, рабочий процесс, чтобы найти методы сделать их жизнь проще. В этом ключе давайте поговорим о передаче чистых файлов .svg из Sketch для их стилизации в css вместо индивидуальной стилизации каждой иконки в отдельности. Эта задача является одной из самых проблемных в Sketch. Экспортируется беспорядочный, непонятный код, встроенный в файлы .svg. Методом проб и ошибок эта проблемы была фактически решена, в конечном итоге мы нашли правильное решение для экспорта чистого файла для команд, которые работают в Sketch. Sketch делает жизнь проще массой разных способов, но экспорт .svg файлов — это просто катастрофа. Этот баг нужно устранить. Давайте я поясню вам на этом конкретном примере, который и сбил с толку, и раскрыл глаза одновременно. Не так давно мне нужно было сделать набор иконок для нашего нового продукта на Lucidworks.
 
 Весь процесс был довольно прост, но как только я начал экспортировать этих засранцев, все пошло коту под хвост. Как только вы открываете файл .svg в Sublime Text, вы видите весь мусор, который был сгенерирован в Sketch. Большая часть этого кода бесполезна, только создает проблемы с .svg, если работаешь с файлами в коде. В нашем случае же требовался полный контроль. Чтобы ускорить рабочий процесс на моей стороны, мне нужно было экспортировать чистый код, чтобы моя команда могла продолжить работу над проектом, а не копаться в каждом файле .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. Давайте проанализируем некоторые возможные решения:
 
  1.  ) Можно создать артборд для каждой иконки, которую нужно экспортировать
  2.  ) Использовать инструмент нарезки и нарезать все по нужным размерам
  3.  ) Выделить несколько иконок на одном большом артборде, кликнуть и экспортировать в формат . 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 пикселя. Этот баг даже добавил параметров в код.
Баг #2
 Удалите границы для чистого кода Проблема: По дизайну каждая иконка была размером width: 24px , height: 24px, и border-radius: 3px. Проблема возникала при экспорте, добавлялся прямоугольник границ, и в css не получалось нормально масштабировать иконки. [dt_code][/dt_code] Решение: Удалите любую прозрачную граничную рамку, и пусть css творит свою магию. Всем разработчикам нужно, чтобы параметр viewbox был равен 24 x 24px. Они сами могут добавить ширину, высоту и border-radius.
Баг #3:
Проблема: 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. Решение: Опять же, сэкономьте себе время и просто не делайте так.
Верный способ после всех экспериментов
  1.  ) Создайте артборд для каждой иконки.
  2.  ) Убедитесь, что позиция каждого артборда не содержит полупикселей, и описывается четными числами.
  3.  ) Удалите все повороты иконок.
  4.  ) Уберите все граничные рамки, чтобы 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-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.
Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.
Новое в этой версии &nbsp
Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и 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. svg
Автор 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 versionOld 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 января 201540 × 37 (482 байт)Sarangbetter centered
15:01, 5 января 201540 × 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 и т. д.), возникает соблазн просто добавить его в свой проект. Тем не менее, я считаю, что небольшая переделка в вашем любимом инструменте, чтобы убедиться, что  точно соответствует , может избавить вас от некоторых головных болей и улучшить результат.
 Простая иконка на монтажной области в Illustrator (слева) и Sketch (справа)
 Работа с новым документом или монтажной областью 
 Создайте новый документ или новую монтажную область в своем любимом инструменте и скопируйте и вставьте значок в центр. Это отличный способ убедиться, что ваша иконка чиста и не имеет множества скрытых путей.
 Квадрат проще 
 Ваш значок  не обязательно должен быть квадратным  , но с квадратными значками легче работать (если только ваш значок или графика не очень широкие или очень высокие).
 Точные размеры имеют значение только в том случае, если вы хотите микроуправлять подгонкой пикселей (чтобы получить максимально четкие результаты на экранах с низким разрешением). Например, если все ваши значки могут поместиться на сетке 15 на 15 пикселей и в основном используются именно с такими размерами, продолжайте работать с монтажными областями или документами 15 × 15. Когда я не уверен, мне нравится размещать элементы на артборде 20×20.
 Воздухопроницаемость по бокам 
 Оставьте немного места по краям, особенно для круглых форм. Браузеры используют сглаживание при рендеринге SVG-фигур, но иногда лишние пиксели от сглаживания визуализируются за пределами  viewBox  и обрезаются.
 Мы не оставили места вокруг значка, поэтому есть риск, что он будет отображаться с квадратными сторонами. И если браузер не отображает SVG идеально, ситуация может ухудшиться.
 Как правило, в значке размером 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, и сравните код до и после, чтобы увидеть, что было удалено или упрощено.
 Удалить данные о цвете 
 Для одноцветных значков убедитесь, что:
  1.  В исходном файле пути черные (  # 000000  ).
  2.  В экспортированном коде нет  заполнения  атрибутов.
 Если у нас есть жестко запрограммированные заливки в исходном коде 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-код, который мы можем использовать:
 
  <использовать xlink:href="icons.svg#play">
 
 Что может выглядеть так:
 Значок SVG без стиля
 Теперь мы собираемся сделать этот HTML-код немного более подробным, чтобы его было легче стилизовать, а также сделать его более доступным. Сначала я покажу несколько общих шаблонов, а затем мы объясним каждый технический выбор.
 Шаблон A: чисто декоративный значок 
  
 Шаблон B: ссылка или кнопка со значком и текстом 
 
   svg#newspaper">
  
  Последние новости
 
 Шаблон C: ссылка или кнопка со значком 
 Это то же самое, что и (B), но мы хотим показать только значок. Мы по-прежнему должны сохранять текст, чтобы пользователи программ чтения с экрана могли его прочитать.
 
  
  Последние новости
 
 Шаблон D: значок и замещающий текст вне ссылки или кнопки 
 Например, если у нас есть столбец таблицы со значками, представляющими «Да» и «Нет»:
 
  
  Да
 
 Что делают наши различные части HTML? 
 Шаблон HTML Что он делает
    Это в основном улучшение удобства использования для некоторых пользователей: когда вы показываете только значок, представляющий функцию, может помочь отображение всплывающей подсказки при наведении курсора.
  …  Мы используем визуально скрытый    для предоставления доступного текста. Другие методы, такие как  aria-label  или элемент SVG  </code>, не очень хорошо поддерживаются в браузерах и программах чтения с экрана, так что это самый надежный способ. Мы обсудим, какие именно стили использовать для наших <code> метка доступа класса </code> в следующем разделе.</td></tr><tr><td> <code> ария-скрытый = "истина" </code></td><td> Поскольку мы уже включаем доступный текст вне элемента SVG, мы можем сказать программам чтения с экрана игнорировать его. Это предотвращает проблемы, когда некоторые читатели могут попытаться прочитать что-то для значка или дважды прочитать ссылку или текст кнопки.</td></tr><tr><td> <code> фокусируемый = "ложь" </code></td><td> Это для IE и Edge. В этих браузерах элемент SVG может получить фокус клавиатуры. Это может привести к тому, что окружающая ссылка или кнопка будет дважды сфокусирована и прочитана дважды.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></td></tr><tr><td> <code> класс = "значок" </code></td><td> Мы могли бы стилизовать элемент SVG напрямую, но добавление класса и повторное использование этого класса везде позволяет нам определить полезные стили по умолчанию для наших значков SVG.</td></tr></table><h4><span class="ez-toc-section" id="i-54"> Использование осмысленных и локализованных меток </span></h4><p> В некоторых статьях рекомендуется связать текстовую метку с каждым файлом SVG в вашем репозитории значков (например, поместив элемент <code><title> </code> в каждый <code> <symbol> </code> ). Это ошибка, потому что визуальный символ может иметь разное значение в зависимости от контекста.</p><p> Значок «увеличительное стекло» может означать «Показать форму поиска» в одном контексте и «Отправить мой поисковый запрос» во втором контексте. Ваши текстовые метки должны быть такими: «Показать форму поиска» и «Отправить поисковый запрос», а не «Поиск» (слишком общий) или, что еще хуже, «Увеличительное стекло» (описывает визуальные эффекты, а не смысл).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> На многоязычных сайтах ваши текстовые метки также должны быть локализованы, включая все текстовые метки, которые по умолчанию скрыты для зрячих пользователей.</p><h4><span class="ez-toc-section" id="i-55"> Внешние и встроенные спрайты </span></h4><p> До сих пор мы показывали примеры для внешнего спрайта <em> </em>. Но некоторые старые браузеры — а именно, IE 9 — IE 11 — поддерживают только <em> встроенных ссылок </em> для <code> <use xlink:href="#some-id"/> </code> .</p><p> Это можно заполнить с помощью JavaScript (svg4everybody, svgxuse). Или вы можете включить свой спрайт <em> в HTML-код каждой страницы </em> .</p><pre> <тело>
  
  <svg aria-hidden="true" focusable="false">
    <символ>…</символ>
    <символ>…</символ>
    <символ>…</символ>
  </svg>
  
  <кнопка>
    <svg aria-hidden="true" focusable="false">
      <использовать xlink:href="#icon-play"></use>
    </svg>
    <span>Начать воспроизведение</span>
  </кнопка>
</тело> </pre><p> У каждого метода есть свои плюсы и минусы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><table class="table table-hover"><tr><td/><th scope="col"> Встроенный спрайт</th><th scope="col"> Внешний спрайт</th></tr><tr><th scope="row"> Поддержка браузера</th><td><p> Встроенная поддержка в IE9+.</p><p> Старым версиям Safari/WebKit требуется спрайт в начале страницы (перед любой ссылкой).</p></td><td><p> Встроенная поддержка в Edge 13+, Safari 9+.</p><p> IE и более ранние версии Safari/WebKit нуждаются в полифилле JS, таком как svg4everybody или svgxuse.</p><p> Загрузка внешнего спрайта из другого домена пока не работает (даже с CORS, см., например, ошибку Chromium). Это можно заполнить с помощью JS, используя svgxuse.</p></td></tr><tr><th scope="row"> Кэширование</th><td><p> Нет кэширования.</p><p> Вес вашего спрайта (5 КБ, 15 КБ, 50 КБ…) добавляется к каждой странице.</p></td><td><p> Спрайт представляет собой отдельный файл и может кэшироваться браузером.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Также он не раздувает HTTP-кеш на стороне сервера.</p></td></tr><tr><th scope="row"> Скорость рендеринга</th><td><p> Иконки отображаются мгновенно.</p><p> В медленных сетях рендеринг структуры и содержимого страницы может задерживаться, если перед содержимым вставлен тяжелый спрайт SVG.</p></td><td><p> Значки могут отображаться с небольшим опозданием, потому что а) для них требуется отдельный HTTP-запрос и б) браузер не определил приоритет загрузки этого SVG-файла (с помощью своего упреждающего предварительного синтаксического анализатора).</p></td></tr><tr><th scope="row"> Обновление</th><td><p> Когда вам нужно обновить свой спрайт, вы должны убедиться, что он добавлен на каждую страницу. Это регенерирует все HTML-страницы, если вы используете статический генератор, или делает недействительными все кеши.</p></td><td><p> Изменен только один общедоступный файл, поэтому управлять обновлениями и кэшированием на стороне сервера немного проще.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p></td></tr><tr><th scope="row"> С CDN</th><td><p> Не влияет.</p></td><td><p> Предупреждение: браузеры не будут загружать SVG, на который ссылается <code> xlink:href </code>, в другом домене или поддомене (кросс-происхождение)! Если вам нужно загрузить спрайт SVG из разных источников, вам нужно будет загрузить его с помощью JavaScript и внедрить на страницу.</p></td></tr></table><p> Мне нравится смешивать оба метода, создавая два спрайта:</p><ol><li> Маленький спрайт с основными значками (например, основные значки, используемые в заголовке страницы), которые будут встроены в каждую страницу. Целевой размер: 5 КБ или меньше.</li><li> Большой файл со всеми иконками проекта, сохраненный как внешний файл. Целевой размер: 50 КБ или меньше.</li></ol><p> В более крупных проектах мы можем добавить больше внешних спрайтов, когда некоторые значки могут быть сгруппированы вместе и использоваться только в одной части сайта или для определенной функции.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="_CSS"> Стилизация значков с помощью CSS </span></h3><p> Теперь, когда у нас есть значки SVG и спрайт SVG, и когда мы узнали, как добавлять значки в наш HTML, давайте посмотрим на сторону CSS.</p><h4><span class="ez-toc-section" id="i-56"> Начиная с базовых стилей </span></h4><p> Вот стили для двух наших служебных классов, <code> icon </code> и <code> access-label </code> .</p><pre> /**
 * Визуально скрытая доступная этикетка
 * Использование стилей, которые не скрывают текст в программах чтения с экрана
 * Мы используем !important, потому что мы не должны применять другие стили к этому скрытому альтернативному тексту.
 */
.access-метка {
  позиция: абсолютная !важно;
  ширина: 1px !важно;
  высота: 1px !важно;
  переполнение: скрыто !важно;
  пробел: nowrap !важно;
}
/**
 * Стиль значка по умолчанию
 */
.значок {
  /* Использовать текущий цвет текста в качестве цвета заливки значка. */
  заливка: текущий цвет;
  /* Также наследуем размер текста. Также позволяет изменить размер значка, изменив его размер шрифта. */
  ширина: 1см;
  высота: 1см;
  /* Вертикальное выравнивание по умолчанию — `baseline`, что оставляет несколько пикселей пространства под значком.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript>  Использование `center` предотвращает это. Для значков, отображаемых рядом с текстом, вы можете использовать более точное значение, например. `vertical-align: -4px` или `vertical-align: -0.15em`. */
  вертикальное выравнивание: посередине;
  /* Пути и штрихи, выходящие за пределы окна просмотра, могут отображаться в IE11. */
  переполнение: скрыто;
} </pre><p> С этим кодом по умолчанию ваши значки SVG должны быть маленькими и использовать цвет текста родителя. Вот так:</p><p> Первый ряд значков с размером текста и цветом по умолчанию</p><p> Второй ряд значков с увеличенным размером текста и зеленым цветом текста</p> Иконки с нашим стилем по умолчанию. Единственное различие между верхней и нижней строкой — это размер шрифта и цвет контейнера.<p> Если формы значка не наследуют цвет текста родителя ( <code> currentColor </code> ), убедитесь, что у вас нет жестко закодированного <code> заполните </code> атрибутов в коде вашей иконки.</p><h4><span class="ez-toc-section" id="i-57"> Почему бы не стилизовать селектор </span></h4><code> svg </code> напрямую?</h4><p> На странице могут быть другие элементы SVG, не являющиеся значками.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Например, большая карта SVG или интерактивная игра SVG. Другая причина заключалась в том, что в старых версиях Firefox (до Firefox 56) была ошибка с селектором <code> svg </code> (он применялся внутри элемента <code> <use> </code>), и таргетинг на класс позволял избежать этой проблемы.</p><p> Не стесняйтесь использовать 9Селектор 0035 svg </code> вместо <code> .icon </code>, если вы считаете, что это сработает для вашего варианта использования.</p><h4><span class="ez-toc-section" id="i-58"> Переопределение базовых стилей </span></h4><p> Должно быть легко переопределить наши базовые стили в определенном контексте:</p><pre> .ShareComponent .icon {
  /* Изменяем ширину и высоту */
  размер шрифта: 40px;
  /* Изменяем цвет заливки */
  цвет: фиолетовый;
  /* Измените выравнивание по вертикали, если вам нужна большая точность
     (иногда требуется для идеального пиксельного рендеринга) */
  вертикальное выравнивание: -4px;
} </pre><h4><span class="ez-toc-section" id="_SVG-5"> Унаследованные стили SVG </span></h4><p> Многие свойства стиля SVG наследуются. Например, когда мы устанавливаем свойство CSS <code> fill </code> для содержащего <code> <svg> </code> элемента, оно переходит к нашим <code> <path> </code> , <code> <circle> </code> и другим графическим элементам.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Мы можем использовать эту технику и для других свойств CSS SVG. Например, свойства обводки:</p><pre> .icon-goldstar {
  заливка: золото;
  штрих: коралловый;
  ширина хода: 5%;
  линия обводки: круглая;
} </pre>Значок звезды со стилем по умолчанию и пользовательским стилем<p> В большинстве случаев мы не собираемся менять много вещей: только свойство <code> fill </code> для основного цвета, а иногда мы добавим или подправим обводку <code> </code> (что-то вроде границы).</p><h4><span class="ez-toc-section" id="i-59"> Два цвета заливки для значка </span></h4><p> Существует довольно простой метод, который позволяет значку иметь два набора контуров с двумя разными значениями <code> заполнения </code> (то есть двумя цветами).</p><pre> <symbol viewBox="0 0 20 20">
  
  <путь д="…" />
  
  <path fill="currentColor" d="…" />
</символ> </pre><pre> .icon-биколор {
  заливка: rebeccapurple;
  цвет: средне-бирюзовый;
} </pre>Два цветных значка<h4><span class="ez-toc-section" id="i-60"> Совет: оставьте место для штрихов </span></h4><p> Помните, мы говорили, что нужно оставлять место вокруг фигур? Это особенно важно, если вы планируете использовать штрихи.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><pre> .icon-strokespace {
  заполнение: нет;
  обводка: текущий цвет;
  ширина хода: 5%;
} </pre><p> В SVG штрихи всегда рисуются с обеих сторон контура (внутри и снаружи). Если ваш путь касается границ области просмотра, половина штриха будет обрезана.</p> В этом примере первая иконка не имеет зарезервированного пустого пространства по бокам, а вторая иконка имеет маленькое (0,5px, для области просмотра 15px).<h4><span class="ez-toc-section" id="i-61"> Совет: используйте проценты для </span></h4><code> stroke-width </code></h4><p> Определение правильного размера штриха может быть сложной задачей. Посмотрите на эти два примера, где мы установили <code> stroke-width:1px </code> для элемента <code> <svg> </code>:</p><p> Что происходит? Свойство <code> stroke-width </code> принимает значение «длина», но это значение относится к </code>.0017 локальные координаты </em> вашей иконки. В приведенных выше примерах:</p><ol><li> Первая иконка имеет размер 20 на 20 пикселей <code> viewBox </code> . Таким образом, обводка в 1 пиксель составляет 1/20 размера значка, большая, но не слишком большая.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Вторая иконка имеет размер 500 на 500 пикселей <code> viewBox </code> . Таким образом, обводка в 1 пиксель составляет 1/500 размера иконки, и это действительно очень мало.</li></ol><p> Если все ваши иконки используют похожий <code> viewBox </code> , это не проблема. Но если они могут сильно отличаться, используя пиксельные или безразмерные значения ( <code> stroke-width:1 </code> ) отсутствует. Что нам делать?</p><p> Проценты могут быть хорошими. Тот же пример с <code> stroke-width:5% </code> :</p><p> Вот это уже лучше. (Для квадратных значков <code> stroke-width:N% </code> будет работать идеально, но обратите внимание, что он может вести себя немного иначе для больших или высоких элементов SVG.)</p><h3><span class="ez-toc-section" id="i-62"> Расширенные темы и приемы </span></h3><p> В предыдущих разделах у вас должно быть все. вам нужно знать, чтобы использовать значки SVG. В следующем разделе добавлена ​​более подробная информация, возможно, с меньшим количеством реальных приложений.</p><h4><span class="ez-toc-section" id="i-63"> Избегайте очень больших нестилизованных значков </span></h4><p> Что произойдет, если ваша основная таблица стилей не загрузится из-за нестабильного соединения, например, в поезде (со мной это происходит постоянно)? Страница может по-прежнему отображаться без стилей.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Если у вас приличная структура HTML, страница все равно будет читабельной, но ваши значки будут очень большими.</p> В последних браузерах размер элемента <code> <svg> </code> по умолчанию составляет 300 на 150 пикселей. Другие браузеры могут дать ему гигантскую 100% ширину!<p> Я рекомендую поместить это в <code><head> </code> ваших страниц:</p><pre>  </pre><p> Коротко и понятно.</p><p> Другой подход заключается в том, чтобы всегда использовать атрибуты ширины и высоты для элементов SVG. Это работает, но если вам нужно изменить размер этого значка в CSS, это может быть немного сложнее.</p><pre> <svg aria-hidden="true" focusable="false">
  …
</svg> </pre><h4><span class="ez-toc-section" id="i-64"> Предварительная загрузка внешних спрайтов </span></h4><p> В разделе «Добавление значков на ваши страницы» мы говорили, что значки из внешнего спрайта могут отображаться с некоторым опозданием, отчасти из-за сканера предварительной загрузки браузера (или упреждающего просмотра).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> предварительный анализатор или что-то еще), не подбирая это <code> <use xlink:href="icons.svg#something"></use> </code> означает, что есть важный файл для ранней загрузки.</p><p> Что мы можем с этим сделать?</p><ul><li><p> Стандартное и будущее решение: добавьте <code><link rel="preload" href="/path/to/icons.svg" as="image"> </code> в <code><head> </code> страницы (подробности о предварительной загрузке, поддержке в ближайшем к вам Chrome и, надеюсь, в других браузерах в будущем).</p></li><li><p> Старое школьное решение: добавьте <code> <img class="lazy lazy-hidden" decoding="async" alt="" src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="/path/to/icons.svg"><noscript><img decoding="async" alt="" src="/path/to/icons.svg"></noscript> </code> в начале <code><body> </code> .</p></li></ul><p> На самом деле я не тестировал эти решения, обычно компромисс «встроенный + внешний» дает достаточно хорошую производительность, поэтому нам не нужно полагаться на предварительную загрузку. Но это стоит исследовать.</p><h4><span class="ez-toc-section" id="i-65"> Выбор отдельных фигур или контуров </span></h4><p> Мы рассмотрели способы настройки заливки, обводки и т. д. для всех контуров из <code> <symbol> </code> и двух или более цветов из разных контуров.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но что, если бы мы могли выбирать определенные пути (возможно, используя классы) непосредственно в <em> экземпляр </em> из <code> <symbol> </code> ? Является ли это возможным?</p><p> Прямо сейчас ответ: да и нет.</p><ol><li> Если вы используете внешние спрайты, вы не можете выбрать отдельные пути (или другие элементы) внутри используемого <code> <symbol> </code> .</li><li> Если вы встраиваете свой спрайт, вы можете выбирать и стилизовать элементы внутри спрайта, но эти <em> стили будут применяться ко всем экземплярам </em> символов.</li></ol><p> Таким образом, даже со встроенным спрайтом вы можете сделать следующее:</p><pre> #мой-символ .style1 {
  /* Стили для одной группы путей */
}
#мой-символ .style2 {
  /* Стили для другого */
} </pre><p> Но так нельзя:</p><pre> .MyComponent-button .icon .style1 {
  /* Для 1 группы путей для этой иконки в данном контексте */
}
.MyComponent-кнопка .icon .style2 {
  /* Для другой группы */
} </pre><p> В будущем может появиться стандартный способ, позволяющий выбирать через Shadow DOM, но это совсем не точно (раньше был комбинатор <code> /deep/ </code>, но его убрали).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h4><span class="ez-toc-section" id="_CSS-2"> Более двух цветов с помощью пользовательских свойств CSS </span></h4><p> Таким образом, мы можем легко изменить цвета наших значков SVG из CSS, для одноцветных значков (просто) и двухцветных значков (требует некоторой подготовки). Есть ли способ, которым мы могли бы иметь многоцветные значки с <em> более чем двумя настраиваемыми цветами </em>?</p><p> Возможно, мы сможем сделать это с помощью пользовательских свойств CSS (они же CSS-переменные). Это требует большой подготовки на стороне SVG:</p><pre> <symbol viewBox="0 0 128 128">
  <path fill="var(--icon-color1)" d="…" />
  <path fill="var(--icon-color2)" d="…" />
  <path fill="var(--icon-color3)" d="…" />
  <path fill="var(--icon-color4)" d="…" />
  <path fill="var(--icon-color5)" d="…" />
  <path fill="var(--icon-color6)" d="…" />
</символ> </pre><p> Для этой демонстрации я украл иконку из превосходного Iconic, который предлагает отзывчивые, многоцветные иконки SVG (на основе CSS и немного JS, насколько я понимаю). Я попытался сымитировать их собственный многоцветный пример для этой иконки, надеюсь, они не против.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p> Один символ, использующий 6 различных пользовательских свойств CSS. <br/> См. в Firefox, Chrome или Safari 9.1+<p> Довольно хорошо работает в поддерживаемых браузерах. Есть только одна иконка: первый экземпляр не объявляет ожидаемые переменные, поэтому возвращается к currentColor; следующие два экземпляра объявляют набор значений переменных.</p><h4><span class="ez-toc-section" id="i-66"> Как вычисляются проценты </span></h4><code> ширины штриха </code>?</h4><p> Чему соответствует процент в <code> stroke-width:N% </code> ? Это ширина, высота значка? Оказывается, это относительно диагонали, но с причудливой формулой (spec) (длина диагонали, деленная на квадратный корень из 2, что близко к 1,4).</p><p> Что это значит? Что ж, для квадратных значков результатом этой формулы является сторона квадрата. Итак, <code> 1% </code> означает «один процент ширины или один процент высоты». Красиво и просто.</p><p> Однако для более широких или высоких значков результат может немного измениться:</p> Во втором значке (соотношение сторон 2:1, показанное с той же высотой и в два раза больше), <code> stroke-width:5% </code> дает нам обводку примерно: 7,91% высоты и 3,95% ширины.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> ширина.<p> Учитывая все обстоятельства, я по-прежнему рекомендую использовать процентные значения для <code> stroke-width </code> . Если вы придерживаетесь квадратного или круглого значка, вы можете использовать процентные значения, понимая, что они означают, грубо говоря, «процент от ширины значка».</p><h4><span class="ez-toc-section" id="i-67"> Использование градиентной заливки </span></h4><p> Мы не можем использовать CSS <code> linear-gradient(…) </code>, потому что это, к сожалению, не применимо к свойству SVG <code> fill </code>. Если нам нужны градиентные заливки, нам нужно будет использовать градиенты SVG.</p><h2><span class="ez-toc-section" id="_SVG-6"> Создание анимированных значков SVG — кодирование не требуется </span></h2><p> Найдите все необходимые инструменты для создания анимированных SVG-иконок еще проще! Усильте свою векторную графику с помощью удобного приложения для анимации иконок.</p><p> НАЧАТЬ</p><p> Кредитная карта не требуется</p><p><h3><span class="ez-toc-section" id="_SVG-7"> Анимированные иконки SVG выведены на новый уровень </span></h3></p><p><h4><span class="ez-toc-section" id="i-68"> Создавайте интерактивные анимированные иконки в кратчайшие сроки </span></h4></p><p><h4><span class="ez-toc-section" id="i-69"> Интуитивно понятный интерфейс, нулевое кодирование </span></h4></p><p><h4><span class="ez-toc-section" id="i-70"> Продвинутые аниматоры, кривая обучения близка к нулю </span></h4></p><p> Повысьте вовлеченность вашего веб-сайта с помощью гладких и легких анимированных значков.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Настройте анимацию на запуск при загрузке, наведении или щелчке.</p><p> Создавайте потрясающие иконки SVG</p><p> с помощью знакомого набора графических инструментов и анимируйте их, устанавливая ключевые кадры на временной шкале. Экспорт одного файла SVG.</p><p> Получите самые передовые аниматоры: морфинг, обтравочные маски, фильтр и анимация пути — это лишь некоторые из универсальных инструментов.</p><p><h3><span class="ez-toc-section" id="_SVGator"> Проекты, сделанные с помощью SVGator </span></h3></p><p> Вдохновитесь удивительными векторными изображениями, созданными нашим постоянно растущим сообществом. SVGator внес свой вклад в тысячи успешных дизайнерских проектов и продолжает свою миссию по поощрению широкого использования SVG.</p><p><h3><span class="ez-toc-section" id="i-71"> Самый продвинутый онлайн-аниматор иконок </span></h3></p><p> Попробуйте лучшее приложение для анимации значков, чтобы создавать невероятно уникальные и привлекательные значки SVG для своего веб-сайта или мобильного приложения. Создайте свой значок SVG с помощью удобного графического инструмента, а затем анимируйте его, не написав ни единой строчки кода.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Ничего скачивать не нужно; вы можете начать прямо сейчас в мощном онлайн-приложении. Ваши анимированные значки сохранят одинаковое качество на веб- и мобильных платформах — именно так, как вы хотите!</p><p><h3><span class="ez-toc-section" id="_SVGator-2"> Лучшие анимированные иконки создаются с помощью SVGator. </span></h3></p><p> Откройте для себя все мощные инструменты для анимированных SVG-иконок прямо у вас под рукой. Создавайте эффекты саморисования или морфинга, комбинируйте обтравочный контур с обтравочной маской, пробуйте анимацию цвета и фильтра, пока код автоматически генерируется в фоновом режиме.</p><p> Установка настраиваемых параметров замедления, времени, интерактивности и типа файла при экспорте. Анимация веб-иконок еще никогда не была такой увлекательной!</p><p><h3><span class="ez-toc-section" id="i-72"> Лучшее взаимодействие с пользователем с меньшими усилиями </span></h3></p><p> Будьте на шаг впереди с анимированными значками SVG, которые не только интересны, но и имеют множество преимуществ с точки зрения удобства работы пользователей.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Привлеките внимание зрителей и увеличьте вероятность взаимодействия с помощью умной микроанимации, скройте время загрузки с помощью привлекательных значков загрузки, поощряйте пользователей следовать за вами с помощью анимированных значков социальных сетей и направляйте их по веб-сайту или приложению с помощью интерактивных настраиваемых значков.</p><p><h3><span class="ez-toc-section" id="i-73"> Как анимировать иконки </span></h3></p><p><h4><span class="ez-toc-section" id="i-74"> Создавать </span></h4></p><p> Нарисуйте значок svg с нуля или импортируйте файл. Используйте графические инструменты, чтобы добавить фильтры, градиенты, маски или внести другие изменения.</p><p><h4><span class="ez-toc-section" id="i-75"> Анимировать </span></h4></p><p> Создание эффектов анимации значков: выберите аниматора, настройте ключевые кадры на временной шкале, установите скорость и функции плавности.</p><p><h4><span class="ez-toc-section" id="i-76"> Экспорт </span></h4></p><p> Экспортируйте анимированные векторные иконки для Интернета или мобильных приложений. Вы получите один файл SVG, готовый к реализации.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> СОЗДАТЬ SVG СЕЙЧАС</p><p> <em> «Что мне больше всего нравится в SVGator, так это то, что он онлайн и работает в облаке. Интерфейс очень простой, интуитивно понятный и удобный. Обучение не такое уж сложное, даже потому, что в Интернете есть много руководств, которые помогают в этом.» </em></p><p> <em> Александр Р. — Дизайнер </em></p><p> <strong> Зачем мне создавать анимированные значки SVG? </strong></p><p> Анимированные векторные значки — это разумный выбор для эффективной передачи сообщения и экономии места. Они поддерживают интерес пользователей и позволяют им взаимодействовать с вашим сайтом или приложением. Лучший пользовательский опыт приводит к более высокой конверсии.</p><p><h4><span class="ez-toc-section" id="i-77"> ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ </span></h4></p><p> <strong> Почему я должен использовать формат SVG вместо другой графики? </strong></p><p> Значки SVG рассчитаны на будущее: они не зависят от разрешения и имеют небольшой размер файла, в отличие от других форматов изображений.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Их можно легко анимировать, а также они поддерживают интерактивность, поэтому вы можете настроить воспроизведение значков при загрузке, наведении или щелчке.</p><p> <strong> Как реализовать анимированные значки? </strong></p><p> Для веб-сайтов можно использовать теги <img> или <object> или вставить код прямо в HTML-блок — результат будет тот же. В случае мобильных приложений добавьте модуль веб-просмотра в свою структуру (React Native или Flutter) и скопируйте файл SVG в свой проект.</p><p><h3><span class="ez-toc-section" id="_SVGator-3"> Работайте умнее, а не усерднее с SVGator </span></h3></p><p> Пришло время попробовать революционно новый способ создания и анимации дизайна. Порадуйте своих зрителей и скажите больше с помощью анимированных значков SVG!</p> <br/><p> НАЧАТЬ</p><p> Кредитная карта не требуется</p><p> РЕСУРСЫ</p><p> ПОДДЕРЖКА</p><p> Посмотрите, что о нас говорят другие:</p><p> © 2022 СВГатор. Все права защищены.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h2><span class="ez-toc-section" id="15_-_SVG"> 15 веб-сайтов для загрузки бесплатных иконок SVG </span></h2><p> С ростом использования экранов с высоким разрешением мы наблюдаем рост иконок SVG. В отличие от растровой графики, SVG масштабируется и не зависит от разрешения, что позволяет ему оставаться четким независимо от размера и разрешения экрана.</p><p> Итак, здесь мы собрали лучшие ресурсы, из которых вы можете получить высококачественные иконки SVG. Некоторые ресурсы предоставляют больше, чем просто значки, с удобными функциями для повышения производительности дизайнеров и разработчиков.</p><p> Без лишних слов, давайте перейдем к полному списку.</p><p data-readability-styled="true"> Тестирование поддержки SVG в механизмах веб-браузеров (пример)</p><h5><span class="ez-toc-section" id="_SVG-8"> Тестирование поддержки SVG в механизмах веб-браузеров (пример) </span></h5><p> SVG (масштабируемая векторная графика) официально поддерживается всеми основными веб-браузерами, включая Internet Explorer. Поддержка охватывает… Подробнее</p><h5><span class="ez-toc-section" id="_Bootstrap"> Иконки Bootstrap </span></h5><p> Официальная коллекция иконок от Bootstrap, одного из самых популярных фреймворков HTML/CSS.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Он содержит <strong> более 1500 значков в форматах SVG и SVG </strong>, обеспечивающих большую гибкость. Хотя эти значки разработаны для Bootstrap, вы можете использовать их с любым другим фреймворком.</p><h5><span class="ez-toc-section" id="Boxicons"> Boxicons </span></h5><p> Boxicons содержит <strong> более 1500 иконок </strong>, сгруппированных по нескольким категориям, таким как Электронная коммерция, Финансы и Музыка, что позволяет легко сортировать и находить конкретную коллекцию.</p><p> Каждая иконка имеет свой формат; вы можете не только выбрать и загрузить их в формате SVG, но и использовать их в качестве значка шрифта </strong> и веб-компоненты. Это один из моих способов, когда мне нужны значки для веб-сайта или приложения.</p><h5><span class="ez-toc-section" id="i-78"> Иконки с перьями </span></h5><p> Поиск <strong> Более 200 красивых иконок </strong> . Что мне нравится в этой коллекции, так это то, что она позволяет настраивать размер, ширину обводки и цвет перед загрузкой значков. Кроме того, вы можете загрузить определенные значки <strong> или загрузить их все вместе </strong> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h5><span class="ez-toc-section" id="Iconoir"> Iconoir </span></h5><p> Iconoir является номером <strong>бесплатная коллекция с открытым исходным кодом, содержащая более 900 иконок </strong> . Он поставляется в нескольких форматах, включая SVG, Font, React.js и даже Figma и Framer. Я уверен, что и дизайнеры, и разработчики оценят эту коллекцию.</p><h5><span class="ez-toc-section" id="Ionicons"> Ionicons </span></h5><p> Набор иконок из Ionic framework, предназначенный для использования в веб-, мобильных или настольных приложениях. Каждая иконка доступна в трех разных стилях: <strong> Outline </strong> , <strong> Filled </strong> и <strong> Sharp </strong> . Они доступны в виде значков SVG и Font.</p><h5><span class="ez-toc-section" id="_Tabler"> Иконки Tabler </span></h5><p> Содержит более 1300 иконок. <strong> Tabler </strong> — одна из идеальных коллекций для использования в дизайне вашего веб-сайта или приложения. Он выглядит четким, последовательным и настраиваемым. Каждый значок доступен в нескольких других форматах, помимо SVG, включая <strong> JSX, URI данных, компонент React, Webfont, SCSS </strong>, а также показывает несколько примеров того, как можно применять значки к компоненту пользовательского интерфейса.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h5><span class="ez-toc-section" id="Radix_Icons"> Radix Icons </span></h5><p> Набор значков <strong> с тонким контуром 907:50 . Каждая иконка размером 15×15 пикселей выглядит четко на экране. Вы можете получить коллекцию в виде файла Figma, файла Sketch, IconJar, SVG или NPM. Эти различные форматы обеспечивают беспрепятственное сотрудничество между дизайнерами и разработчиками.</p><h5><span class="ez-toc-section" id="Heroicons"> Heroicons </span></h5><p> Heroicons — это набор иконок, разработанный людьми из Tailwind. Он предоставляет набор из более чем 200 иконок. Каждая иконка поставляется в <strong> 2 стилях «Контур» и «Заполненный» </strong> и доступна в виде библиотеки компонентов <strong> SVG, JSX и Vue 907:50 . Для дизайнеров вы можете скачать файл Figma для всех иконок.</p><h5><span class="ez-toc-section" id="_Ant_Design"> Иконки Ant Design </span></h5><p> Эта иконка является частью системы Ant Design. Но вы можете установить коллекцию значков как отдельный компонент через NPM. Каждый значок доступен как компонент <strong> React.js </strong> и будет отображаться как SVG.</p><p> Он также поставляется в трех стилях — <strong> Контурный </strong> , <strong> Заполненный </strong> , <strong> Двухцветный </strong> — и совместим со светлой или темной цветовой схемой из коробки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Если вы создаете приложение React.js, это одна из лучших коллекций иконок.</p><h5><span class="ez-toc-section" id="Remix_Icon"> Remix Icon </span></h5><p> <strong> Remix Icon </strong> — удивительная коллекция из более чем 2000 иконок. Некоторые значки имеют несколько вариаций. Например, существует более десятка вариаций домашних иконок. Это позволяет вам выбрать наиболее подходящую иконку для персонажа вашего сайта.</p><h5><span class="ez-toc-section" id="i-79"> Иконки для дизайна материалов </span></h5><p> Это коллекция иконок из дизайн-системы Google Material. Он поставляется с интуитивно понятным пользовательским интерфейсом, который обеспечивает удобство реализации значка на нескольких различных платформах, включая Интернет с помощью SVG или значка, Android, iOS, Flutter, а также специально интегрирован с Angular.</p><h5><span class="ez-toc-section" id="Octicons"> Octicons </span></h5><p> Библиотека значков от Github, эти значки были созданы для их системы дизайна «Primer», <strong> специально для приложений Github </strong>, что делает его идеальным набором, если вы создаете веб-сайт или приложение, интегрированное с Github.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вы можете установить и использовать значки через Gem (пакет Ruby), NPM или как компонент React.js.</p><h5><span class="ez-toc-section" id="Icons_Grommet"> Icons Grommet </span></h5><p> Набор <strong> SVG-иконок, созданных как компоненты React.js </strong> . Вы можете найти несколько уникальных значков в коллекции, а некоторые значки даже доступны в полноцветном виде, а не только в белом и черном.</p><h5><span class="ez-toc-section" id="CSSgg"> CSS.gg </span></h5><p> Этот сайт содержит около 700 высококачественных иконок. Коллекция значков доступна во многих форматах, включая <strong> CSS, SVG, TypeScript, Figma, Adobe XD и в качестве конечной точки API </strong>. Это позволяет упростить совместную работу дизайнеров и разработчиков при разработке веб-сайтов и преобразовании дизайна в код.</p><h5><span class="ez-toc-section" id="Typicons"> Typicons </span></h5><p> Typicons — это набор красивых иконок современного вида, предназначенных для веб-приложений или нативных — мобильных и настольных — приложений. На момент написания этой статьи существует около 300 значков, каждый из которых доступен как в формате SVG, так и в формате шрифта значков, и не зависит от разрешения, что делает его четким и четким независимо от разрешения экрана.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h2><span class="ez-toc-section" id="i-80"> Масштабируйте их и сохраняйте качество </span></h2><p> Давайте перейдем сразу к делу: значки SVG представляют собой графику на основе XML, которая использует векторные данные, а не пиксели. Полезен ли этот формат? Вы будете удивлены.</p><p> Совсем недавно наша команда обсуждала, какой формат значков лучше — SVG, шрифты значков или PNG. Имейте в виду, что мы команда из 25 дизайнеров и веб-разработчиков, так что дела пошли жарко (но цивилизованно).</p><p> Тем не менее, иконки SVG одержали победу в большинстве категорий. Ясно выделяются две причины: вы можете легко настроить их, и они нравятся современным браузерам. После того, как вы узнаете о них, мы уверены, что вы тоже оцените их.</p><p> В этой статье мы поговорим о:</p><h3><span class="ez-toc-section" id="_SVG-9"> Что делает значки SVG особенными? </span></h3><p> Самое большое качество масштабируемой векторной графики (SVG) заключается в том, что они <strong> основаны на векторах </strong> . Благодаря этому браузер может легко их отображать, и все внесенные вами изменения будут отображаться без потери качества.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Что это означает на практике? Это позволяет вам увеличивать (или уменьшать) <strong> столько, сколько вы хотите </strong>, сохраняя при этом все детали кристально четкими. Точки и линии определяются кодом SVG, поэтому изображение может отображаться правильно независимо от размера.</p> Что такое иконки SVG?<p> Теперь вы можете сказать: иконочные шрифты тоже векторные и легко масштабируются. Верно, но с существенной разницей — иконочный шрифт воспринимается браузером как шрифт, а <strong> SVG — как графика </strong>. Это, в свою очередь, предотвращает правила сглаживания и последующее размытие краев.</p><p> Следует также отметить, что векторные иконки SVG отображаются с использованием <strong> фонов CSS </strong> . Это означает, что вы можете легко изменить цвет, размер или любое другое свойство прямо в CSS.</p><p> С точки зрения производительности огромным преимуществом является возможность хранить множество значков в одном файле. Это очень полезно, потому что предотвращает необходимость отправки нескольких HTTP-запросов (делает страницу намного быстрее).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Итак, есть ли недостатки у значков SVG? Да. Одним из самых больших недостатков <strong> является их несовместимость со старыми веб-браузерами </strong>. Например, IE8 и Android 2.3 (и более ранние версии) их не отобразят. Кроме того, они не особенно хороши для сложных изображений, потому что код становится громоздким, что вызывает проблемы с рендерингом.</p><blockquote><p> Значки SVG представляют собой векторные графические файлы, что означает, что вы можете свободно изменять их размер, сохраняя при этом идеальное качество изображения.</p></blockquote><h3><span class="ez-toc-section" id="_SVG-10"> Производительность значков SVG </span></h3><p> Общая производительность значков SVG может оцениваться по нескольким аспектам: масштабируемость, настройка, поддержка браузерами, доступность, встроенный и внешний стиль, а также позиционирование. Мы скажем несколько слов о каждом из них, чтобы вы могли понять, подходит ли вам набор иконок SVG.</p><h4><span class="ez-toc-section" id="i-81"> Масштабируемость (разрешение) </span></h4><p> Огромным преимуществом использования значков SVG является возможность их настройки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Строки кода очень легко изменить, поэтому вы можете увеличить или уменьшить изображение за считанные секунды. Затем браузер снова отображает файл, и вы получаете кристально чистое SVG-изображение <strong> </strong> . Кроме того, в отличие от файла шрифта, файл CSS значка SVG по-прежнему рассматривается как графика, поэтому сглаживание не выполняется.</p><h4><span class="ez-toc-section" id="i-82"> Настройка </span></h4><p> Что нам особенно нравится в веб-значках в формате SVG, так это простота их настройки. Вы можете <strong> измените каждый элемент SVG в CSS </strong>, от размера и цвета до анимации значка. SVG-анимация работает очень хорошо при отображении без снижения скорости страницы.</p><h4><span class="ez-toc-section" id="i-83"> Поддержка браузеров </span></h4><p> Формат файла векторной графики очень хорошо поддерживается всеми современными браузерами. Если вы храните свою библиотеку значков в виде спрайта SVG (один файл), <strong> не будет многократных запросов </strong>, поэтому производительность браузера будет превосходной. Однако, как мы уже отмечали, старые браузеры (IE8 и старше) не имеют хорошей поддержки SVG, поэтому векторное изображение не будет отображаться должным образом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h4><span class="ez-toc-section" id="SEO"> SEO и доступность </span></h4><p> Благодаря своей природе XML графические форматы <strong> SVG легко доступны </strong> . Браузер считывает и отображает информацию быстро и легко, что не только повышает скорость, но и помогает с SEO.</p><h4><span class="ez-toc-section" id="_SVG-11"> Внешние и встроенные значки SVG </span></h4><p> С точки зрения производительности <strong> встроенные значки SVG являются гораздо лучшим решением </strong> . Встроенный значок уменьшает количество HTTP-запросов, что снижает время загрузки страницы, делая его похожим на значки шрифтов. С другой стороны, внешние SVG могут отправлять большое количество запросов, что нежелательно, если вам нужна высокопроизводительная страница.</p><h4><span class="ez-toc-section" id="i-84"> Позиционирование </span></h4><p> В отличие от альтернатив, масштабируемые векторные значки имеют <strong> позиционирование с кодом </strong> . Из-за этого очень легко определить точное положение без регулировки размера, выравнивания или интервала, как если бы вы делали это со значком шрифта.</p><h3><span class="ez-toc-section" id="_SVG-12"> Где использовать (и не использовать) иконки SVG </span></h3><p> После разговора о технических моментах мы также должны обсудить, где вы должны и не должны использовать систему иконок SVG.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Как мы уже отмечали, основными преимуществами SVG являются <strong> простая настройка и идеальное масштабирование </strong> . Таким образом, они отлично подходят для значков, которые необходимо легко подстраивать под размер окна.</p><p> С другой стороны, значки SVG и другая графика SVG в целом не предназначены для сложных изображений. В этом случае код в теге SVG становится огромным, что может замедлить работу страницы.</p><h3><span class="ez-toc-section" id="_SVG-13"> Как значки SVG сравниваются с другими форматами? </span></h3><p> Все три самых популярных формата значков (PNG, SVG и шрифт) имеют свои преимущества и недостатки в зависимости от того, где вы их используете. Давайте быстро рассмотрим некоторые из наиболее заметных отличий.</p><h4><span class="ez-toc-section" id="SVG"> SVG и иконочные шрифты </span></h4><p> Основной принцип SVG и иконочных шрифтов очень похож, главное отличие заключается в том, как их воспринимает браузер. Хотя оба являются векторами, браузер воспринимает SVG как графику, а иконочный шрифт обрабатывается как стандартный веб-шрифт.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Это позволяет <strong> SVG избегать правил сглаживания </strong> , в то время как иконочные шрифты подчиняются им и могут стать размытыми при слишком большом расширении.</p><p> С другой стороны, иконочные шрифты тоже имеют свои преимущества. 9Размер файла 0749 меньше по сравнению с SVG </strong>, поэтому они обеспечивают еще более высокую производительность. Из-за этого они являются лучшим вариантом, если вам нужно большое количество простых однотонных иконок.</p><h4><span class="ez-toc-section" id="SVG_vs_PNG_Icons"> SVG vs PNG Icons </span></h4><p> Основное различие между ними заключается в том, что <strong> растровая графика (PNG) имеет фиксированный размер, а векторная графика (SVG) не имеет </strong> .</p><p> Это означает, что если вы растянете изображение PNG за пределы его исходного размера, оно начнет становиться размытым и пиксельным. Иконки SVG, с другой стороны, визуализируются с использованием векторов, поэтому у них нет этой проблемы.</p><p> Однако у значков PNG тоже есть свои преимущества. После оптимизации файлы PNG могут быть очень маленькими и плавно работать на веб-страницах.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Кроме того, они значительно лучше <strong> для сложных детализированных изображений </strong> .</p><p> Если вы хотите больше узнать о форматах высококачественных изображений, чтение о HEIF и Progressive JPEG — отличный способ начать.</p><h3><span class="ez-toc-section" id="_SVG-14"> Самостоятельное создание значков SVG </span></h3><p> Если вы решили, что значки SVG — это решение для вас, теперь вам нужно создать систему значков, которую вы сможете загрузить на свой веб-сайт. Здесь у вас есть несколько вариантов — создать SVG с нуля, преобразовать шрифт значков или преобразовать формат изображения в код SVG.</p><h4><span class="ez-toc-section" id="_SVG-15"> Создание SVG с нуля </span></h4><p> Если вам нужен собственный набор значков, вы будете рады узнать, что создавать SVG несложно (при наличии базовых навыков проектирования).</p><p> Если у вас есть платное программное обеспечение от Adobe, четыре программы могут экспортировать и импортировать SVG: InDesign, Illustrator, Photoshop и Animate. Некоторые программы, такие как Illustrator, могут даже экспортировать код, который можно включить непосредственно в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Однако вам не обязательно иметь дорогое программное обеспечение для создания файлов SVG. Некоторые из известных бесплатных опций включают, среди прочего, Inkscape, GIMP и Figma.</p><blockquote><p> Не хотите тратить время на создание собственных иконок? Это нормально, мы понимаем и хотим помочь.</p><p> <strong> Все дизайны Flat-Icons доступны в формате SVG </strong>, что позволяет мгновенно адаптировать их для вашего проекта. Если это звучит интересно, вы можете взглянуть на нашу <strong> галерею </strong> или ознакомиться с набором <strong> из 20 000 иконок </strong>.</p></blockquote><h4><span class="ez-toc-section" id="_TTF_SVG"> Преобразование шрифта значков в вектор (TTF в SVG) </span></h4><p> Для тех из вас, у кого есть библиотеки шрифтов значков и которые хотят преобразовать их в спрайт символов SVG, Интернет — это путь. Два конвертера, которые мы рекомендуем (потому что мы их используем), — это Convertio и CloudConvert, но многие альтернативы также доступны в Интернете.</p><h4><span class="ez-toc-section" id="_PNG_SVG"> Преобразование формата изображения в вектор (PNG в SVG) </span></h4><p> Как и значки шрифтов, форматы изображений (прежде всего PNG) довольно просто преобразовать.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Проще всего сделать это в любом из программ, которые мы перечислили выше. Помимо этого, вы также можете использовать онлайн-конвертер, такой как ранее упомянутый Convertio или Vector Magic.</p><h4><span class="ez-toc-section" id="_SVG_WordPress"> Добавление файла SVG в WordPress </span></h4><p> После того, как вы подготовили свои значки (будь то отдельный значок, пакет значков или спрайты изображений SVG), добавить их в WordPress можно одним из двух основных способов.</p><p> Поскольку мы говорили о том, что значки SVG представляют собой блок кода, вы можете просто вставить HTML-код туда, куда хотите, чтобы значок был.</p><p> Если вы не хотите возиться с кодом, вам понадобится плагин WP, который позволит вам напрямую добавлять изображение. Два отличных плагина для обработки загрузки SVG — это SVG Support и Safe SVG, но есть много вариантов, если вы хотите изучить.</p><h3><span class="ez-toc-section" id="i-85"> Заключение </span></h3><p> Как и любой другой формат, иконки SVG имеют как плюсы, так и минусы — назвать их идеальными было бы нечестно. Однако в современной веб-разработке у них есть много преимуществ, поэтому их популярность продолжает расти.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Вам кажется, что мы что-то упустили? Есть что-то, что вы хотели бы добавить? Напишите нам комментарий, будем рады.</p><p> Формат файла SVG используется для двумерных изображений с особым акцентом на настройку. Поскольку это векторы, вы можете изменять размер, цвета и другие элементы без ущерба для качества.</p><p> Значки SVG существуют в виде текста XML, который браузеры могут легко читать и отображать. Тот факт, что они представляют собой блоки кода (а не изображения), позволяет легко вносить изменения и настраивать их под свои нужды.</p><p> Это действительно зависит от того, для чего вам нужен образ. Из-за своей масштабируемости SVG намного лучше подходят для логотипов, материального дизайна иконок, анимированных иконок и иллюстраций. С другой стороны, PNG значительно лучше для сложных изображений.</p><p> Вы должны использовать SVG, когда вам нужна графика легко изменяемого размера. Хорошим примером являются значки, но SVG также отлично подходит для логотипов, графиков и иллюстраций.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Кроме того, создание библиотеки значков с помощью значков SVG повышает производительность страницы.</p><h2><span class="ez-toc-section" id="_SVG_SVG"> Учебное пособие по SVG: как кодировать иконки SVG вручную </span></h2><p> Сколько себя помню, я избегал касаться SVG при работе с интерфейсным кодом. У меня не было бы проблем с HTML, CSS или JavaScript, но SVG всегда пугали меня своим причудливым синтаксисом и этими странными, неразборчивыми строками букв и цифр. Вы знаете такие:</p><pre> <svg viewBox="0 0 24 24">
  <path d="M 4 4 ч 16 а 2 2 0 0 1 2 2 v 14" />
</svg>
 </pre><p> Если бы мне понадобились значки для проекта, я бы установил одну из многих доступных библиотек значков, но это всегда оставляло меня неудовлетворенным. Конечно, в использовании библиотек нет ничего плохого, но также не помешает понять, как на самом деле работают используемые вами инструменты. Так почему бы также не научиться рисовать свои собственные SVG-иконки вручную, даже если в конечном итоге вы будете использовать библиотеку?</p><p> Как вы увидите в этом руководстве, кодирование значков SVG вручную на самом деле довольно просто, если вы освоите основные формы и синтаксис.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Мы нарисуем кучу иконок, чтобы помочь вам отточить свои навыки работы с SVG. Вот краткий обзор всех иконок, которые мы создадим:</p><ul><li> Выравнивание по левому краю Четыре горизонтальные линии располагаются вертикально и выравниваются по левому полю, сужаясь вправо.</li><li> Текст Текстовый значок, представленный заглавной буквой T в стиле с засечками.</li><li> ЧасыЗначок часов, представленный в виде круга с двумя концентрическими линиями для стрелок, указывающих в направлении 8 часов.</li><li> ИнформацияИнформационный значок, часто используемый для обозначения дополнительной информации или уведомлений. Представлен в виде круга с концентрической строчной буквой i.</li><li> Стрелка вправоСтрелка, указывающая вправо, с центром в круге.</li><li> ПредупреждениеПредупреждающий индикатор, представленный в виде направленного вверх равностороннего треугольника и концентрического восклицательного знака.</li><li> КалендарьЗначок календаря с прямоугольным телом и двумя параллельными вертикальными линиями вверху, с горизонтальной линией вверху</li><li> Внешняя ссылкаЗначок, используемый для представления внешних ссылок и ресурсов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Прямоугольная форма имеет вырез в правом верхнем углу; стрелка указывает через этот пробел.</li></ul><p> Я черпал вдохновение для этих SVG-иконок из Feather Icons, фантастической библиотеки, созданной Коулом Бемисом. Эти значки помогут нам научиться рисовать следующие фигуры SVG:</p><ul><li> Строки</li><li> Полилинии</li><li> кругов</li><li> полигонов</li><li> Изогнутые дорожки</li></ul><p> Как только вы изучите основы, вы сможете рисовать с помощью SVG почти все что угодно.</p><p> Надеюсь, вам не терпится начать! Не стесняйтесь прыгать, если хотите, но я намеренно структурировал это руководство таким образом, чтобы каждый раздел основывался на новых знаниях.</p><p> Пропустить оглавление</p><h3><span class="ez-toc-section" id="i-86"> Оглавление </span></h3><p> <strong> SVG </strong> означает масштабируемую векторную графику; это <strong> формат векторного изображения </strong>, позволяющий рисовать фигуры с помощью языка разметки (XML). «Масштабируемая» часть имени является ключевой характеристикой SVG — в отличие от форматов растровых изображений (например, PNG, JPEG), векторные изображения не теряют качества при увеличении их исходного размера.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В то время как растровые изображения хранят свои данные с использованием пикселей фиксированного размера, векторные изображения, такие как SVG, хранят свои данные в виде определений XML для фигур, которые можно легко масштабировать в соответствии с любым размером.</p><ul aria-hidden="true"><li></li><li></li><li></li><li></li><li></li><li></li></ul><p> По аналогии, это разница между рисованием чего-либо на экране (растровые изображения) и предоставлением вашему браузеру <em> инструкций </em> о том, как рисовать что-либо на экране относительно системы координат (векторные изображения). Векторные изображения делают ваш браузер более гибким, поскольку их можно масштабировать до любого размера с помощью простой математики.</p><p> В качестве бонуса вы даже можете плавно анимировать SVG, чтобы создать действительно забавный и привлекательный пользовательский интерфейс. Вот несколько заслуживающих внимания блогов разработчиков, которые делают это:</p><ul><li> Джошуа Комо</li><li> Кэсси Эванс</li><li> Джордж Фрэнсис</li><li> Уилл Бойд</li></ul><h4><span class="ez-toc-section" id="_SVG-16"> Как рисуются SVG? </span></h4><p> Существует два способа рисования SVG: вручную, когда вы явно определяете разметку с помощью HTML, или с помощью программы векторного изображения <strong> </strong>, такой как Inkscape:</p><p> Эти программы поставляются с основными формами, палитрами цветов, инструментами рисования и контуром.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> манипулирование, позволяющее создавать сложные рисунки с большей легкостью, чем если бы вы делали их вручную. Обычно дизайнеры и художники логотипов используют графические интерфейсы, такие как Inkscape, а не кодируют SVG вручную. Тем не менее, понимание того, как работает разметка SVG, является ценным опытом. В конце концов, эти программы выводят <code> .svg </code> файлов; если вы проверите эти файлы, вы обнаружите, что их разметка — это всего лишь XML, и вы сможете разобраться в этом, если поймете, как работают SVG.</p><p> Я знаю, вам не терпится перейти к примерам, но обо всем по порядку!</p><p> Все формы SVG определяются внутри самого элемента SVG, например:</p><pre> <svg>
  
</svg>
 </pre><p> Конечно, это еще не все. Давайте рассмотрим базовую анатомию SVG.</p><h4><span class="ez-toc-section" id="_SVG-17"> Объявления пространств имен SVG </span></h4><p> Если вы когда-либо проверяли содержимое файла <code> .svg </code>, например, созданного Inkscape или какой-либо другой программой для работы с векторными изображениями, вы могли видеть этот атрибут <code> xmlns </code> в самом элементе <code> svg </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> :</p><pre> <svg xmlns="http://www.w3.org/2000/svg"></svg>
 </pre><p> Это известно как объявление пространства имен. Проще говоря, объявление пространства имен помогает пользовательскому агенту, такому как ваш браузер, понимать и анализировать синтаксис элемента. Здесь мы объявили, что наше пространство имен — SVG. Объявление пространства имен не требуется, если вы визуализируете встроенные значки SVG, как в HTML. Но если вы включаете SVG <em> файлы </em> (например, как изображение), то SVG не нужно указывать свое пространство имен. Я опущу пространство имен в этом уроке, так как оно нам не нужно.</p><h4><span class="ez-toc-section" id="SVG-2"> SVG </span></h4><code> viewBox </code> и Size</h4><p> Вы, наверное, также видели эти три атрибута: <code> width </code> , <code> height </code> и <code> viewBox </code> :</p><pre> <svg
  ViewBox="0 0 24 24"
 
 
></svg>
 </pre><p> Атрибут <code> viewBox </code> определяет <strong> размеры области просмотра («холста») для SVG 907:50 . Первые два числа позволяют вам панорамировать окно просмотра SVG по горизонтали или вертикали, придавая ему вид некоторого внутреннего смещения относительно начала координат, <code> (0, 0) </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В приведенном выше примере кода у нас есть смещение <code> 0 0 </code> , что означает, что верхний левый угол области просмотра <em> является </em> исходной точкой.</p><p> Ниже приведены две иконки SVG. Тот, что слева, имеет <code> viewBox </code> из <code> 0 0 24 24 </code> . Тот, что справа, имеет <code> viewBox </code> из <code> 6 6 24 24 </code> . В результате начало координат второго окна просмотра смещено на <code> 6 </code> единиц по горизонтали и вертикали. Таким образом, вместо <code> (0, 0) </code> источник теперь равен <code> (6, 6) </code> . Это означает, что изображение смещается влево относительно <code> viewBox </code>. Как будто мы переместили наш холст в правый нижний угол.</p><ul aria-hidden="true"><li></li><li></li></ul><p> Последние два числа определяют размер (горизонтальный и вертикальный соответственно) этой системы координат, прежде чем будет выполнено какое-либо масштабирование. Большие числа приводят к большему размеру области просмотра и большему пространству для работы, в то время как меньшие числа приводят к меньшему размеру области просмотра и меньшему пространству для работы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В приведенных выше примерах размер области просмотра объявлен равным 9.0035 24 24 </code> , поэтому наши координаты варьируются от <code> (0, 0) </code> (верхний левый угол) до <code> (24, 24) </code> (нижний правый угол):</p><p> Наконец, <code> ширина </code> и <code> высота </code> Атрибуты работают так, как вы ожидаете: они определяют окончательную (масштабированную) ширину и высоту вашего элемента SVG в пикселях. Кроме того, вы можете изменить размер SVG с помощью CSS, используя <code> width </code> и <code> height </code> .</p><h5><span class="ez-toc-section" id="_SVG-18"> Масштабирование SVG: </span></h5><code> viewBox </code> против ширины <code> </code> и <code> высота </code></h5><p> Все фигуры SVG рисуются относительно системы координат <code> viewBox </code>, а не окончательной <code> ширины </code> и <code> высоты </code> SVG. Это означает, что размер вашего холста может быть <code> 24x24 </code> , и любые фигуры, которые вы рисуете, будут ограничены этим базовым координатным пространством <code> 576 </code> пикселей, но позже вы можете масштабировать векторное изображение по мере необходимости.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Например, если наш <code> viewBox </code> равен <code> 0 0 24 24 </code>, но мы установили ширину и высоту равными <code> 32 </code> или какое-то другое число, то мы по-прежнему работаем с базовым размером области просмотра <code> 24x24 </code> , поэтому видимой точки вроде <code> (25, 25) </code> нет. Все просто увеличится в <code> 1,3 </code> раз, чтобы получить SVG-рисунок большего размера. Это действительно полезно, потому что это означает, что мы можем рисовать все наши значки, используя фиксированный размер окна просмотра, и если мы позже захотим увеличить его, нам не нужно настраивать формы и их координаты — ширина <code>, высота </code> и <code>. </code> все масштабирует за нас.</p><p> Для этого урока я буду использовать <code> viewBox </code> из <code> 0 0 24 24 </code>, но размеры <code> 64x64 </code>, чтобы значки было легче увидеть. Однако вы можете использовать любые значения, которые вы хотите, если вы соответствующим образом настроите свою разметку.</p><h4><span class="ez-toc-section" id="SVG-3"> SVG и «пиксели» </span></h4><p> Прежде чем мы двинемся дальше, поясняющее примечание о пикселях и SVG: в самом простом SVG один пиксель соответствует ровно одному элементу на экране.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но, как отмечено в документации MDN, это не всегда так. В конце концов, SVG масштабируемы, поэтому <code> 1px </code> в координатном пространстве SVG может фактически отображаться в <code> 4px </code>, если SVG был масштабирован до большего размера с <code> шириной </code> и <code> высотой </code>. Это отличается от поведения растровых изображений, где один «пиксель» всегда является единицей измерения фиксированного размера. Ключевой вывод: везде, где я использую <code> пикселей </code> в качестве единицы, не принимайте это за один буквальный выходной пиксель на экране пользователя.</p><p> Лучший способ научиться рисовать значки SVG вручную — это работать с основными фигурами. Для начала мы нарисуем несколько значков с помощью линий. Это познакомит нас с некоторыми основами SVG, прежде чем мы углубимся в более сложные формы.</p><h4><span class="ez-toc-section" id="1"> 1. Линии </span></h4><p> Мы попрактикуемся в рисовании линий, воссоздав три значка ниже. Вы найдете их во многих текстовых редакторах, которые предлагают варианты выравнивания текста:</p><ul><li> Выравнивание по левому краю Четыре горизонтальные линии располагаются вертикально и выравниваются по левому полю, сужаясь вправо.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Выравнивание по центруЧетыре горизонтальные строки располагаются вертикально и центрируются по горизонтали на странице.</li><li> Выравнивание по правому краю Четыре горизонтальные линии располагаются вертикально и выравниваются по правому полю, сужаясь влево.</li></ul><p> Каждый значок состоит из четырех горизонтальных линий. И чтобы нарисовать линию в SVG, нам нужны две вещи:</p><ul><li> Начальная точка: <code> (x1, y1) </code>.</li><li> Конечная точка: <code> (x2, y2) </code> .</li></ul><p> Напоминаем, что система координат SVG начинается с <code> (0, 0) </code> в верхнем левом углу. Значения <code> x </code> увеличиваются при движении вправо, а значения <code> y </code> увеличиваются при движении вниз.</p><p> SVG позволяют указать начальную и конечную точки линий с помощью четырех атрибутов: <code> x1 </code> , <code> y1 </code> , <code> x2 </code> и <code> y2 </code> . Итак, чтобы нарисовать простую горизонтальную линию, мы могли бы сделать следующее:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <строка x1="0" y1="4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 2" x2="24" y2="4.2"/>
</svg>
 </pre><p> Вы можете думать об этом как о том, что браузеру нужно положить воображаемое перо на <code> (0px, 4.2px) </code> и переместить его вправо, пока оно не достигнет <code> (24px, 4.2px) </code> .</p><p> Если вы используете эту разметку на своем конце, вы пока ничего не увидите. Это потому, что мы не сказали браузеру, какой цвет использовать для линии! Это можно сделать двумя способами:</p><ul><li> Установка атрибута <code> штриха </code> для элемента SVG или любой из его отдельных форм.</li><li> Установка свойства <code> штрих </code> через CSS, для элемента SVG или любой из его форм.</li></ul><p> Оба будут делать одно и то же, но я предпочитаю подход CSS, так как это означает, что нужно писать меньше кода. Вы можете либо передать жестко закодированный цвет, например шестнадцатеричное значение, либо использовать магическое значение <code> currentColor </code>:</p><pre> svg {
  обводка: текущий цвет;
}
 </pre><p> В CSS, <code> currentColor </code> всегда ссылается на текущий текст <code> color </code> , который является либо цветом, унаследованным от родителя, либо любым другим цветом, который вы явно определили для этого элемента.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Я предпочитаю <code> currentColor </code> для SVG, так как мне легко вставлять свои значки в любое место, и они наследуют цвет окружающего текста. Более того, если этот цвет текста установлен с помощью пользовательских свойств CSS, <code> currentColor </code> будет меняться при каждом изменении пользовательского свойства! Это полезно для стилизации значков SVG в приложениях, которые имеют как светлый, так и темный режим (например, этот сайт).</p><p> Установив цвет обводки, мы наконец можем увидеть нашу линию:</p><p> Горизонтальная линия</p><p> При уменьшении масштаба эта линия может выглядеть немного тонкой. Это потому, что он использует ширину штриха по умолчанию <code> 1 </code> единиц. К счастью, мы можем изменить его толщину с помощью атрибута <code> stroke-width </code> либо для родительского элемента SVG, либо для любой отдельной формы. Если вы установите его для родителя SVG, все фигуры наследуют это значение. Однако, как и в случае с цветом обводки, вы также можете сделать это с помощью одноименного свойства CSS, например:</p><pre data-copyable="true"> свг {
  ширина хода: 2;
}
 </pre><p> В результате линия стала толще:</p><p> В оставшейся части этого урока я буду использовать ширину обводки <code> 2 </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вы можете выбрать другое значение, если хотите, если вы скорректируете оставшиеся расчеты.</p><p> И это все, что нам нужно знать, чтобы нарисовать три значка, которые мы видели ранее! Мы просто настроим координаты <code> x </code>, чтобы получить более короткие или более длинные строки по мере необходимости. Вот полная разметка для всех трех значков:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <строка x1="2" y1="4.2" x2="22" y2="4.2"/>
  <строка x1="2" y1="9.4" x2="16" y2="9,4"/>
  <строка x1="2" y1="14,6" x2="22" y2="14,6"/>
  <строка x1="2" y1="19,8" x2="16" y2="19,8"/>
</svg>
<svg viewBox="0 0 24 24">
  <строка x1="2" y1="4.2" x2="22" y2="4.2"/>
  <строка x1="6" y1="9,4" x2="18" y2="9,4"/>
  <строка x1="2" y1="14,6" x2="22" y2="14,6"/>
  <строка x1="6" y1="19,8" x2="18" y2="19,8"/>
</svg>
<svg viewBox="0 0 24 24">
  <строка x1="2" y1="4.2" x2="22" y2="4.2"/>
  <строка x1="8" y1="9,4" x2="22" y2="9.4"/>
  <строка x1="2" y1="14,6" x2="22" y2="14,6"/>
  <строка x1="8" y1="19,8" x2="22" y2="19,8"/>
</svg>
 </pre><p> Вам может быть интересно, как я выбрал значения <code> и </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Они кажутся произвольными, не так ли? Оказывается, нам просто нужно немного посчитать.</p><p> У нас есть четыре линии, каждая с шириной штриха <code> 2 </code> ; вместе они занимают в общей сложности <code> 8px </code> пространства. Оставшиеся <code> 16px </code> пространства равномерно распределяются между пятью промежутками, что дает нам <code> 3,2 пикселя </code> интервалов над и под каждой строкой. Но обратите внимание, что если мы поместим линию на каком-то значении <code> y </code>, она не будет рисовать себя на <code> 2px </code> вниз от этой точки. Скорее, он будет центрироваться на этом уровне, с половиной своей толщины сверху и снизу. Итак, первая строка начинается не с <code> y = 3,2px </code>, а с <code> y = 3,2 + 1 = 4,2px </code>.</p><p> Кстати, вам может оказаться полезным временно давать вашим элементам SVG границу во время их рисования, чтобы вы могли лучше визуализировать ограничения, с которыми вы работаете:</p><pre data-copyable="true"> свг {
  граница: сплошная 1px;
}
 </pre><ul><li></li><li></li><li></li></ul><p> Я буду делать это для большинства демонстраций в этом уроке.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Прежде чем мы двинемся дальше, обратите внимание, что вам не нужно рисовать линии, которые являются идеально горизонтальными. Вы также можете рисовать идеально вертикальные линии:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <строка x1="12" y1="2" x2="12" y2="22" />
</svg>
 </pre><p> Или даже диагональные линии:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <строка x1="2" y1="2" x2="22" y2="22" />
</svg>
 </pre><p> И это все, что вам действительно нужно знать о строках SVG. В качестве упражнения я попрошу вас нарисовать значок гамбургера, который вы видели бы в мобильном навигационном меню.</p><p> Кстати, вы заметили, что все мои линии имеют закругленные концы? Если вы следили за своим концом, вы могли видеть плоские концы, а не круглые. Вы не делаете ничего плохого! Мы рассмотрим это в следующем разделе ( <code> stroke-linejoin </code> и <code> stroke-linecap </code> ).</p><h4><span class="ez-toc-section" id="2"> 2. Полилинии </span></h4><p> Представьте, что мы хотим нарисовать несколько сегментов линии, например, букву <code> T </code> в текстовом значке:</p><p> Нам действительно нужно рисовать отдельные <code> <line> </code> формы для каждого отдельного сегмента, и расположить каждую строку в правильном месте в нашей сетке <code> 24x24 </code>? В этом простом случае сделать это было бы не так уж и сложно, но вы можете себе представить, что это будет раздражать для чего-то более сложного.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> К счастью для нас, поэтому <code> <полилиния> </code> существует! В основном это позволяет нам определять только узлы/точки для пути, состоящего из нескольких сегментов линии. Браузер играет для нас, рисуя фактические линии между каждым узлом.</p><p> <code> <полилиния> </code> определяется с помощью атрибута <code> точек </code>, например:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 4, 21 4" />
</svg>
 </pre><p> Это самое простое из возможных <code> <полилиния> </code>, который вы можете создать; он определяет горизонтальную линию от <code> (3, 4) </code> до <code> (21, 4) </code> :</p><p> <code> <polyline> </code> принимает строку, состоящую из <code> x y </code> точек, разделенных запятыми. Вам не нужно использовать запятые, но мне нравится, потому что это делает пары <code> (x, y) </code> точек четкими. Без запятых приведенный выше SVG немного сложнее читать, так как вам нужно мысленно сгруппировать числа:</p><pre> <svg viewBox="0 0 24 24">
  <polyline points="3 4 21 4" />
</svg>
 </pre><p> В любом случае, ваш браузер рисует сплошную линию между первой парой координат, сплошную линию между второй и третьей парами координат и так далее.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Однако обратите внимание, что ломаная линия не замыкается автоматически. Другими словами, если у вас есть <code> n </code> узлов, узел <code> n-1 </code> не будет возвращаться назад и присоединяться к первому узлу, если вы явно не повторите первый узел в <code> точках </code> . Мы еще вернемся к этой идее в разделе, посвященном полигонам, но пока держите ее в уме.</p><p> Мы можем нарисовать значок текста, который я показал ранее, комбинируя <code> <polyline> </code> и базовую форму <code> <line> </code>. Мы начнем с создания верхней левой засечки буквы <code> T </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 8, 3 4" />
</svg>
 </pre><p> От <code> (3, 4) </code> мы будем двигаться горизонтально, пока не окажемся на таком же расстоянии от правого края, как и от левого:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 8, 3 4, 21 4" />
</svg>
 </pre><p> Хм, это не так! Левый и верхний края буквы <code> T </code> были нарисованы правильно, но между ними есть странная заливка, которая создает нежелательную треугольную форму.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Что с этим делать?</p><p> Это из-за свойства SVG, которое я скрывал от вас до сих пор: <code> fill </code> . Точно так же, как <code> штрих </code> определяет цвет линий формы SVG, <code> заливка </code> определяет фоновую заливку SVG. Для большинства фигур <code> fill </code> имеет значение 9.0035 черный </code> по умолчанию. Но в этом случае, поскольку мы хотим рисовать только линии и не хотим никакой заливки для этого значка, мы можем установить заливку <code> none </code> , либо используя атрибут <code> fill </code> в элементе SVG, либо свойство CSS то же имя.</p><p> Обратите внимание, что некоторые значки могут на самом деле выиграть от пользовательской заливки, поэтому вам не нужно <em> всегда </em> отключать это глобально в вашем приложении. Но для наших целей это будет мешать рисованию таких фигур, как полилинии, многоугольники и т. д., поскольку мы на самом деле не <em> нужно </em> заполнить. Итак, в оставшейся части этого урока я буду использовать этот дополнительный CSS, чтобы очистить заливку для всех значков:</p><pre data-copyable="true"> svg {
  заполнение: нет;
}
 </pre><p> С этим набором наша форма теперь должна выглядеть правильно:</p><p> Теперь мы снова опустимся вертикально вниз, чтобы завершить правую засечку буквы <code> T </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 8, 3 4, 21 4, 21 8" />
</svg>
 </pre><p> Отсюда нам просто нужно закончить основу и основание буквы:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 8, 3 4, 21 4, 21 8" />
  <строка x1="12" y1="4" x2="12" y2="20" />
  <строка x1="8" y1="20" x2="16" y2="20" />
</svg>
 </pre><p> Обратите внимание, что с тем же успехом вы можете использовать полилинии для двух линий; вы получите ту же форму:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polyline points="3 8, 3 4, 21 4, 21 8" />
  <polyline points="12 4, 12 20" />
  <polyline points="8 20, 16 20" />
</svg>
 </pre><p> Отлично! Вы создали четыре значка.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Прежде чем двигаться дальше, я хочу обсудить еще несколько атрибутов SVG.</p><h5></h5><code> stroke-linejoin </code> и <code> stroke-linecap </code></h5><p> В этой статье текстовый значок выше имеет закругленные края и концы:</p><p> Но если вы скопируете и вставите разметку на своем конце, вы получите текстовый значок чьи верхний левый и верхний правый углы острые, а конечные концы (как у засечек) плоские:</p><p> Это связано с двумя связанными атрибутами SVG (и их эквивалентными свойствами CSS):</p><ul><li> <code> stroke-linejoin </code> : управляет скруглением углов контуров. По умолчанию установлено значение <code> miter </code>, что означает острые углы. Вы можете использовать <code> round </code> для создания закругленных углов.</li><li> <code> stroke-linecap </code> : управляет закруглением конечных путей («шапок»), например, на концах линий или полилиний. Его значение по умолчанию — <code>, но </code>, что дает вам плоские концевые концы. Если вы установите его на <code> вокруг </code>, вы получите закругленные клеммы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul><p> В оставшейся части этого руководства все примеры будут использовать следующий CSS:</p><pre data-copyable="true"> svg {
  линия обводки: круглая;
  штрих-лайнкап: круглый;
}
 </pre><p> Вы можете не использовать их, если не хотите. Вы также можете применять их условно к определенным элементам SVG, но не к другим, используя атрибуты вместо свойств CSS.</p><h4><span class="ez-toc-section" id="3"> 3. Круги </span></h4><p> В этом разделе мы научимся рисовать эти три круглых значка SVG:</p><ul><li> ЧасыЗначок часов, представленный в виде круга с двумя концентрическими линиями для стрелок, указывающих в направлении 8 часов.</li><li> ИнформацияИнформационный значок, часто используемый для обозначения дополнительной информации или уведомлений. Представлен в виде круга с концентрической строчной буквой i.</li><li> Стрелка вправоСтрелка, указывающая вправо, с центром в круге.</li></ul><p> Здесь нам пригодятся наши знания о полилиниях, но не хватает одной детали: кругов!</p><p> На уроке геометрии вы, наверное, узнали, что для того, чтобы нарисовать круг, вам нужны две вещи:</p><ul><li> Центр круга; мы назовем эту точку <code> (сх, су) </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Радиус окружности, обычно обозначаемый как <code> r </code> .</li></ul><p> То же самое и с SVG! Вот разметка для простого круга:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>
 </pre><p> Я выбрал радиус <code> 10 </code>, чтобы оставить <code> 2px </code> пространства со всех сторон круга; в противном случае, если мы выберем радиус <code> 12 </code> , он будет простираться до самого края SVG и будет обрезан:</p><p> В качестве альтернативы вы можете установить <code> overflow: visible </code> на ваших SVG, но я предпочитаю первый метод, так как он дает моим значкам SVG немного отступов, а переполнения могут нарушить интервал в вашем CSS.</p><p> Теперь, когда мы знаем, как рисовать круги в SVG, мы можем нарисовать три иконки, показанные ранее:</p><ul><li></li><li></li><li></li></ul><h5><span class="ez-toc-section" id="i-87"> Значок часов </span></h5><p> Начнем с циферблата часов в виде круга:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>
 </pre><p> Осталось нарисовать стрелки часов, для этого воспользуемся ломаной линией:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
  <polyline points="13 7, 13 14, 9 14" />
</svg>
 </pre><p> Один вниз, два вперед!</p><h5><span class="ez-toc-section" id="i-88"> Значок информации </span></h5><p> Как и прежде, мы сначала создадим круг:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>
 </pre><p> Остальная часть информационного значка состоит из линии и кружка.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вот тело <code> i </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
  <строка x1="12" y1="12" x2="12" y2="16" />
</svg>
 </pre><p> А вот и точка в <code> i </code> ; мы заполняем его, чтобы он был сплошным:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
  <circle cx="12" cy="8" r="0.5" fill="currentColor" />
  <строка x1="12" y1="12" x2="12" y2="16" />
</svg>
 </pre><p> Обратите внимание, что радиус равен <code> 0.5 </code> потому что круг заполнен, и мы не хотим, чтобы он был толще корпуса <code> i </code>.</p><h5><span class="ez-toc-section" id="i-89"> Значок круга со стрелкой вправо </span></h5><p> Последний! Для этой иконки я просто дам вам полную разметку; это круг, линия и полилиния:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
  <строка x1="8" y1="12" x2="16" y2="12" />
  <polyline points="12 8, 16 12, 12 16" />
</svg>
 </pre><p> Линия древка стрелы; полилиния создает наконечник стрелки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это так просто!</p><h4><span class="ez-toc-section" id="4"> 4. Многоугольники </span></h4><p> Помните, я упоминал, что <code> <polyline> </code> не замыкаются сами по себе? Что ж, естественным продолжением этого является форма, состоящая из того, что <em> — это самозамыкающийся </em>, и это <code> <polygon> </code> ! Он работает так же, как <code> <polyline> </code> , за исключением того, что он автоматически создает путь между последним узлом и первым узлом, возвращаясь к тому, с чего мы начали. Хотя технически мы могли бы сделать это с <code> <polyline> </code> , <code> <polygon> </code> избавляет нас от лишнего шага, позволяя нам легко создавать такие формы, как прямоугольники, восьмиугольники, треугольники и многое другое!</p><p> Например, <code> <polygon> </code> позволяет нам нарисовать треугольник, используя всего три точки:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polygon points="12 2, 22 22, 2 22" />
</svg>
 </pre><p> Круто! Опираясь на это, теперь мы можем создать значок индикатора предупреждения, который я показал вам в начале этого урока.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это должно быть вам знакомо, если вы помните, как мы создавали значок информации раньше:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polygon points="12 2, 22 22, 2 22" />
  <строка x1="12" y1="10" x2="12" y2="14" />
  <circle cx="12" cy="18" r="0.5" fill="currentColor" />
</svg>
 </pre><p> Кстати, я упоминал выше, что мы можем использовать <code> <polygon> </code> для создания всех видов фигур, но некоторые из них поставляются в виде готовых форм. Например, прямоугольники <em> можно </em> создать с помощью <code> <polygon> </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <polygon points="2 4, 22 4, 22 22, 2 22" />
</svg>
 </pre><p> Но они также могут быть созданы с помощью <code> <rect> </code> , который принимает координаты <code> x </code> и <code> y </code> для своего верхнего левого угла, а также ширину <code> </code> и высоту <code> </code> . Это все, что нужно для рисования прямоугольника:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <рект х = "4" у = "4" />
</svg>
 </pre><p> Пока мы здесь, почему бы нам не нарисовать иконку календаря? Технически он создается с использованием <code> <path> </code> , о чем мы узнаем в следующем разделе.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> На данный момент мы можем использовать <code> <rect> </code> и посмотрите, как это выглядит.</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <рект х = "3" у = "5" />
  <строка x1="4" y1="10" x2="20" y2="10" />
  <строка x1="7" y1="3" x2="7" y2="7" />
  <строка x1="17" y1="3" x2="17" y2="7" />
</svg>
 </pre><p> Это нормально, за исключением того, что четыре угла острые:</p><p> В то время как исходный значок имеет закругленные углы:</p><p> (Выглядит ли это лучше, зависит от личных предпочтений.)</p><p> Для этого нам нужно узнать о пути.</p><h4><span class="ez-toc-section" id="5"> 5. Контуры </span></h4><p> В конце концов мы подошли к <code> <путь> </code> , одному из самых мощных элементов, которые может предложить SVG. Путь может быть чем угодно — линией, окружностью, дугой и многим другим. Большинство основных фигур, которые мы видели, можно воспроизвести с помощью контуров.</p><p> Учебное пособие по <code> <путь> </code> само по себе заняло бы довольно много времени, так как нужно охватить многое. Сейчас мы просто рассмотрим некоторые основы — рисование линий и дуг.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Одно это может привести вас очень далеко в сочетании со всем остальным, чему мы научились.</p><h5><span class="ez-toc-section" id="_SVG-19"> Как создавать пути с помощью SVG </span></h5><p> Чтобы создать <code> <path> </code> , нам нужно изучить новый синтаксис. Элемент <code> <path> </code> принимает атрибут <code> d </code> (что означает определение <em> </em> ). Этот атрибут содержит набор <strong> низкоуровневых инструкций </strong>, которые сообщают вашему браузеру, что рисовать. Вы действительно можете думать об этом как о инструкции, подробно и последовательно описывающей каждый шаг: «Иди сюда, сделай это, затем иди сюда и сделай то и так далее и тому подобное».</p><p> Вот как может выглядеть <code> <path> </code>:</p><pre> <path
  д = "
    М 4 4
    ч 16
    а 2 2 0 0 1 2 2
    v 14
    а 2 2 0 0 1 -2 2
    ч -16
    а 2 2 0 0 1 -2 -2
    v-14
    а 2 2 0 0 1 2 -2"
/>
 </pre><p> Это один из самых пугающих аспектов ручного кодирования SVG, но как только вы изучите синтаксис команд <code> d </code>, все станет намного проще и менее страшно.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Повесить там!</p><p> Как я уже отмечал выше, атрибут принимает список команд для рисования фигуры. Вы можете просмотреть полный список команд пути в документации MDN, но я также скопирую их сюда:</p><ul><li> MoveTo: <code> M </code> , <code> м </code></li><li> LineTo: <code> L </code>, <code> l </code>, <code> H </code>, <code> h </code>, <code> V </code>, <code> v </code></li><li> Кубическая кривая Безье: <code> C </code> , <code> c </code> , <code> S </code> , <code> s </code></li><li> Квадратичная кривая Безье: <code> Q </code> , <code> q </code> , <code> T </code> , <code> t </code></li><li> Кривая эллиптической дуги: <code> A </code> , <code> a </code></li><li> ClosePath: <code> Z </code> , <code> г </code></li></ul><p> Поскольку мы только начинаем, мы будем игнорировать некоторые из этих команд. Я расскажу об этих:</p><ul><li> MoveTo: <code> M </code> , <code> m </code></li><li> LineTo: <code> L </code>, <code> l </code>, <code> H </code>, <code> h </code>, <code> V </code>, <code> v </code></li><li> Кривая эллиптической дуги: <code> A </code> , <code> a </code></li><li> ClosePath: <code> Z </code> , <code> Z </code></li></ul><h5><span class="ez-toc-section" id="_SVG-20"> Команды пути SVG: </span></h5><code> MoveTo </code> и <code> LineTo </code></h5><p> Команда <code> <путь> </code> существует в двух вариантах, как вы могли заметить выше:</p><ul><li> Версия в верхнем регистре (например, <code> H </code> ), обозначающая абсолютную команду.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Версия в нижнем регистре (например, <code> h </code> ), обозначающая относительную команду.</li></ul><p> Вот примеры этих двух:</p><ul><li> <code> M 4 4 </code> : Браузер, пожалуйста, поднимите воображаемое перо и переместите его в точку <code> (4, 4) </code> .</li><li> <code> h 16 </code> : От того места, где вы сейчас находитесь, нарисуйте линию, продолжающуюся <code> 16px </code> вправо.</li></ul><p> Это легче запомнить, чем кажется: <code> M </code> для <strong> m </strong> овинг, <code> H/h </code> для <strong> h </strong> горизонтальных линий, <code> V/v </code> для <strong> v </strong> для вертикальных линий,<p>5 <strong> a </strong> rcs, <code> L/l </code> для линий в любом направлении и так далее.</p><p> Если вы со мной до сих пор, то вы должны понять первые две команды в этом пути:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16"
  />
</svg>
 </pre><p> Это дает нам эту линию, простирающуюся от <code> (4, 4) </code> до <code> (20, 4) </code> :</p><p>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> код, который это делает:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 8 8
      v 8
      м 8 0
      в-8"
  />
</svg>
 </pre><p> Давайте интерпретируем эти команды по одной:</p><ol><li> <code> M 8 8 </code> : Поднимите ручку. Переместитесь на <code> (8, 8) </code> в нашей системе координат <code> 24x24 </code>.</li><li> <code> v 8 </code> : Опусти ручку. Нарисуйте вертикальную линию <code> 8px </code> вниз и остановитесь.</li><li> <code> м 8 0 </code> : Поднимите ручку. Переместите его вправо на <code> 8px </code> от того места, где вы сейчас находитесь.</li><li> <code> v -8 </code> : Опусти ручку. Нарисуйте вертикальную линию <code> 8px </code> вверх и остановитесь.</li></ol><p> Обратите внимание, как мы смешали относительные и абсолютные команды. Мы могли бы также сказать это:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 8 8
      В 8 16
      М 16 16
      В 16 8"
  />
</svg>
 </pre><p> И это дает нам точно такую ​​же форму, но требует указания абсолютных координат:</p><p> С относительными командами обычно проще работать, но это действительно зависит от того, что вы рисуете.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Наконец, обратите внимание, что <code> L/l </code> является более общей версией <code> H/h </code> и <code> V/v </code>. В то время как последние два используются для рисования линий в одном направлении (горизонтально или вертикально), <code> L/l </code> можно использовать для рисования линий <em> в любом направлении </em> . Таким образом, он всегда принимает два числа.</p><p> Вот пример рисования диагональной линии с помощью относительной команды <code> LineTo </code>:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 2 2
      л 20 20"
  />
</svg>
 </pre><p> Здесь написано: «Перейдите к <code> (2, 2) </code> и проведите линию <code> 20 </code> единиц вправо и <code> 20 </code> единиц вниз».</p><p> Обратите внимание, что мы <em> могли бы </em> всегда используйте команду <code> L/l </code> для рисования всех линий, но варианты быстрого доступа избавляют нас от необходимости печатать. Например, чтобы нарисовать горизонтальные линии с помощью <code> l </code> , мы должны явно обнулить значение <code> y </code> , но нам не нужно делать это с <code> h </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h5><span class="ez-toc-section" id="_SVG-21"> Команды пути SVG: </span></h5><code> ClosePath </code></h5><p> Команда <code> Z </code> (или <code> z </code> ) означает <code> ClosePath </code> . Помните, когда мы узнали о <code> <polygon> </code> и о том, как он автоматически закрывается? Ну, <code> Z </code> — это команда, используемая для автоматического закрытия <code> <path> </code> . В отличие от других команд, которые мы рассмотрели до сих пор, версия <code> ClosePath </code> в нижнем и верхнем регистре идентична, поэтому просто выберите одну и придерживайтесь ее (я буду использовать строчные буквы <code> z </code> ).</p><p> Например, чтобы нарисовать самозакрывающийся квадрат с <code> <путь> </code> , нам нужно явно нарисовать только три из четырех линий; четвертый можно нарисовать автоматически с помощью <code> ClosePath 9Команда 0036:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 2 2
      ч 20
      v 20
      ч -20
      г"
  />
</svg>
 </pre><p> Как только вы освоитесь с этими базовыми командами движения, на самом деле очень легко использовать <code> <path> </code> — иногда это даже <em> проще </em>, чем использование отдельных фигур, потому что вы можете создать что угодно с помощью <code> <path> </code> , все в одном месте.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h5><span class="ez-toc-section" id="_SVG-22"> Команды пути SVG: </span></h5><code> Кривая эллиптической дуги </code></h5><p> Я оставил самую сложную команду напоследок, но как только вы поймете, как она работает, вы сможете создать практически любую иконку, которую захотите. К концу этого раздела мы создадим две последние иконки:</p><ul><li>.
 КалендарьЗначок календаря с прямоугольным телом и двумя параллельными вертикальными линиями вверху, с горизонтальной линией вверху</li><li> Внешняя ссылкаЗначок, используемый для представления внешних ссылок и ресурсов. Прямоугольная форма имеет вырез в правом верхнем углу; стрелка указывает через этот пробел.</li></ul><p> Дуги — это то, как мы рисуем <strong> изогнутых путей </strong> , и, как и все другие команды пути, они бывают как абсолютными (<code> A </code>), так и относительными (<code> a </code>) вариантами. Я настоятельно рекомендую ознакомиться с документацией MDN по команде Elliptial Arc Curve, но я также обобщу здесь все, что вам нужно знать.</p><p> Параметры дуг SVG представлены в таблице ниже:</p><ul><li> <code> rx </code> : X-радиус эллипса, образующего дугу.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> <code> ry </code> : Y-радиус эллипса, образующего дугу.</li><li> <code> x-axis-rotation </code> : На сколько повернуть дугу относительно оси x (обычно это просто <code> 0 </code> ).</li><li> <code> big-arc-flag </code> : если <code> 1 </code> , рисует большую дугу; в противном случае рисует маленькую.</li><li> <code> флаг развертки </code> : если <code> 1 </code> , рисует дугу по часовой стрелке; если <code> 0 </code> , рисует дугу против часовой стрелки.</li></ul><p> Вы заметите, что абсолютная и относительная версии команды дуги ( <code> A </code> / <code> a </code> ) практически идентичны, за исключением последних двух параметров. В то время как прописная <code> дуга </code> имеет абсолютные <code> x </code> и <code> y </code>, которые говорят вам, где заканчивается дуга, относительная дуга в нижнем регистре указывает дельта-x (<code> dx </code>) и дельта-y (<code> dy </code>). смещение относительно начального положения дуги.</p><p> Первые два параметра, <code> rx </code> и <code> ry </code>, должны быть вам знакомы, если вы работали с радиусами границ в CSS.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Поскольку мы рисуем эллипс, а не обязательно круг, нам нужно указать два радиуса. Если наша дуга круговая, то <code> rx = ry </code> .</p><p> Параметры <code> large-arc-flag </code> и <code> Sweep-flag </code>, вероятно, являются более запутанными из всех параметров. Вместе они используются для управления длиной и направлением дуги. Есть хорошая демонстрация Codepen, с которой вы можете повозиться, чтобы лучше понять, как работают эти параметры.</p><p> Как и прежде, полезно посмотреть на конкретный пример. Вот очень простая дуга в квадранте 1:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 22 12
      а 10 10 0 0 0 -10 -10"
    />
</svg>
 </pre><p> Это дает дугу против часовой стрелки, потому что мы установили <code> флаг развертки </code> равным <code> 0 </code> :</p><p> И, как вы уже догадались, мы можем сцепить четыре дуги, чтобы создать круг:</p><pre data-copyable="true"> <svg viewBox ="0 0 24 24">
  <путь
    д = "
      М 22 12
      а 10 10 0 0 0 -10 -10
      а 10 10 0 0 0 -10 10
      а 10 10 0 0 0 10 10
      а 10 10 0 0 0 10 -10"
    />
</svg>
 </pre><p> (Но я думаю, вы согласитесь, что гораздо проще просто использовать <code> <circle> </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> )</p><p> Отлично! Мы знаем все, что нужно для того, чтобы нарисовать наши две иконки. Давай сделаем это!</p><h5><span class="ez-toc-section" id="1-2"> 1. Значок календаря </span></h5><p> Я буду делать это пошагово, чтобы вы могли визуализировать процесс.</p><p> Сначала нарисуем верхнюю часть календаря (хотя вы можете начать с другого места):</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16"
    />
</svg>
 </pre><p> Затем мы рисуем <code> 2x2 </code> дугу по часовой стрелке, перемещая <code> 2px </code> вправо и <code> 2px </code> вниз:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2"
    />
</svg>
 </pre><p> Оттуда идем вниз <code> 14px </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14"
    />
</svg>
 </pre><p> Нарисуйте дугу нижнего правого угла:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2"
    />
</svg>
 </pre><p> Сдвинуться влево на <code> 16px </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2
      ч -16"
    />
</svg>
 </pre><p> Нарисуйте дугу для нижнего левого угла:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2
      ч -16
      а 2 2 0 0 1 -2 -2"
    />
</svg>
 </pre><p> Вверх <code> 14px </code> :</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2
      ч -16
      а 2 2 0 0 1 -2 -2
      в-14"
    />
</svg>
 </pre><p> И, наконец, замкните фигуру явной дугой, а не <code> z </code> (которая нарисует линию).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2
      ч -16
      а 2 2 0 0 1 -2 -2
      v-14
      а 2 2 0 0 1 2 -2"
    />
</svg>
 </pre><p> И это все, что нужно знать о прямоугольнике со скругленными углами! Теперь добавим несколько строк:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д = "
      М 4 4
      ч 16
      а 2 2 0 0 1 2 2
      v 14
      а 2 2 0 0 1 -2 2
      ч -16
      а 2 2 0 0 1 -2 -2
      v-14
      а 2 2 0 0 1 2 -2"
    />
  <строка x1="2" y1="10" x2="22" y2="10" />
  <строка x1="7" y1="2" x2="7" y2="6" />
  <строка x1="17" y1="2" x2="17" y2="6" />
</svg>
 </pre><p> Опять же, вы можете нарисовать эти линии цифрой 9.0035 <путь> </code>, если хотите.</p><h5><span class="ez-toc-section" id="2-2"> 2. Значок внешней ссылки </span></h5><p> Мы почти закончили!</p><p> Надеюсь, теперь вы достаточно освоились с путями SVG, чтобы интерпретировать код здесь:</p><pre data-copyable="true"> <svg viewBox="0 0 24 24">
  <путь
    д="М 18 14
      v 6
      а 2 2 0 0 1 -2 2
      Н 6
      а 2 2 0 0 1 -2 -2
      В 10
      а 2 2 0 0 1 2 -2
      В 12"
    />
  <строка x1="12" y1="14" x2="20" y2="6" />
  <polyline points="16 5,5, 20 5,5, 20 9,5" />
</svg>
 </pre><p> Это дает нам классический значок внешней ссылки:</p><p> Стрелка должна быть вам знакома, когда мы создавали стрелку, направленную вправо; теперь это просто диагональная стрелка, указывающая вверх-вправо.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Тело значка также должно быть знакомо по календарю, за исключением того, что здесь оно не закрыто и начинается в другом месте.</p><p> И это наша последняя иконка!</p><p> Для этого урока я красиво отформатировал пути SVG, чтобы их было легче читать и понимать новичкам. Но в дикой природе вы, скорее всего, столкнетесь с такими компактными обозначениями пути:</p><pre> <path d="M18 14v6a2 2 0 0 1 -2 2H6a2 2 0 0 1 -2 -2" />
 </pre><p> Это может показаться странным, но это все тот же синтаксис, который мы изучили. Хитрость здесь в том, что мы можем однозначно удалить пробел до и после каждой команды пути SVG (буквы). Пока мы не столкнем два последовательных числа друг с другом, мы все равно получим то же определение пути, что и раньше.</p><p> Вы можете столкнуться с этим синтаксисом, если вы экспортировали сжатый SVG из инструмента рисования, такого как Inkscape, или если вы вручную запустили его через минификатор SVG.</p><p> Теперь, когда вы научились кодировать иконки SVG вручную, я рекомендую также узнать о:</p><ul><li> элементах SVG <code> <defs> </code> и <code> <use> </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> масок SVG, которые используются для управления непрозрачностью частей SVG.</li><li> команд кривой SVG.</li></ul><p> Все они основаны на концепциях, с которыми вы уже знакомы.</p><p> Кодирование значков SVG вручную не так уж сложно, но, безусловно, может показаться, что это так, когда вы только начинаете. Вам предстоит выучить много нового синтаксиса, но это определенно того стоит! Теперь, когда вы проработали этот учебник, вы должны быть в состоянии читать и интерпретировать разметку SVG более уверенно и понимать, как библиотеки значков SVG, которые вы используете, действительно работают под капотом.</p><p> Этого достаточно для этого урока! Надеюсь, вы узнали что-то новое (и весело провели время!).</p><h2><span class="ez-toc-section" id="WPIcons"> WPIcons — Главная </span></h2><h4><span class="ez-toc-section" id="i-90"> Новый </span></h4><p> Рекомендуемые поставщики значков для использования с WPIcons Читать сообщение →</p><h3><span class="ez-toc-section" id="i-91"> Адаптивные значки </span></h3><p> Независимо от того, используете ли вы встроенные значки шрифтов или пользовательские значки svg, WPIcons создаст значки, которые будут выглядеть потрясающе на любом устройстве.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="_WordPress"> Блоки значков WordPress </span></h3><p> Построенный с поддержкой блоков контента WordPress 5.0, мы включили ряд настраиваемых блоков, которые упрощают добавление и вставку значков.</p><h3><span class="ez-toc-section" id="_SVG-23"> Пользовательские значки SVG </span></h3><p> Загружайте пользовательские значки .svg непосредственно в плагин. Плагин возьмет на себя всю тяжелую работу по установке иконок на ваш сайт.</p><p> Посмотреть все 40 скриншотов</p><h5><span class="ez-toc-section" id="Easy_Setup"> Easy Setup </span></h5><p> WPIcons будут запущены и запущены за считанные секунды. Просто установите и активируйте, и вы готовы добавлять значки на свой сайт!</p><h5><span class="ez-toc-section" id="i-92"> Адаптивные значки </span></h5><p> Значки, созданные с помощью WPIcons, выглядят потрясающе на любом устройстве. Иконки будут расширяться и сжиматься без <em> любая </em> потеря качества.</p><h5><span class="ez-toc-section" id="_490"> Более 490 значков в комплекте </span></h5><p> WPIcons поставляется в комплекте с более чем 490 высококачественными адаптивными значками шрифтов, которые помогут вам начать работу.</p><h5><span class="ez-toc-section" id="i-93"> Поддержка нескольких сайтов </span></h5><p> WPIcons поддерживает работу с несколькими сайтами, что позволяет вам устанавливать различные наборы значков на каждом сайте в сети.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Настройки также не зависят от сайта, на котором установлен плагин.</p><h5><span class="ez-toc-section" id="i-94"> Блоки значков </span></h5><p> Добавляйте значки к любому сообщению или странице с помощью наших настраиваемых блоков значков WordPress. Быстро и легко обновляйте значки замены внешнего вида.</p><h5><span class="ez-toc-section" id="_SVG-24"> Пользовательские значки SVG </span></h5><p> Загрузите пользовательские значки .svg непосредственно в плагин. Плагин возьмет на себя всю тяжелую работу по установке иконок на ваш сайт.</p><h5><span class="ez-toc-section" id="_Unlimed"> Наборы значков Unlimed </span></h5><p> Установите неограниченное количество значков в формате шрифта или svg и наборов значков с помощью WPIcons Pro — предела нет!</p><h5><span class="ez-toc-section" id="i-95"> Индивидуальные настройки значков </span></h5><p> Воспользуйтесь нашим встроенным средством настройки значков, чтобы придать своим значкам полностью индивидуальный вид. Меняйте цвета, добавляйте анимацию или состояния наведения, превращайте значки в ссылки… и многое другое!</p><h5><span class="ez-toc-section" id="i-96"> Значки меню </span></h5><p> Быстро и легко добавляйте любые значки, содержащиеся в WPIcons, к пунктам меню.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Настройте свои меню, даже не касаясь кода!</p><h5><span class="ez-toc-section" id="Icon_Services"> Icon Services* </span></h5><p> Подключите свой сайт к лучшим в мире поставщикам значков, чтобы получить доступ к сотням тысяч дополнительных значков .svg.</p><h5><span class="ez-toc-section" id="i-97"> Полностью интернационализированный </span></h5><p> WPIcons готов к переводу на ваш язык. Как всегда, переводы приветствуются!</p><h5><span class="ez-toc-section" id="i-98"> Скачать наборы иконок </span></h5><p> Быстро загружайте любой установленный набор значков одним нажатием кнопки, что позволяет легко перемещать наборы значков между сайтами.</p><h5><span class="ez-toc-section" id="i-99"> Готов к работе </span></h5><p> Тщательно протестированный и созданный с учетом скорости, WPIcons отлично работает на всех сайтах; от большого к маленькому и все между ними.</p><h5><span class="ez-toc-section" id="_WordPress-2"> Сделано для WordPress </span></h5><p> WPIcons и похоже на WordPress; бесшовно интегрируется. Он живет на вашем веб-сайте (а не на чьем-то еще), поэтому у вас есть полный контроль.</p><h5><span class="ez-toc-section" id="i-100"> Расширенная документация </span></h5><p> У нас есть вся необходимая документация, которая поможет вам быстро приступить к работе.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Столкнулись с проблемами? Мы вас прикрыли!</p><h5><span class="ez-toc-section" id="i-101"> Удобен для разработчиков </span></h5><p> WPIcons обладает широкими возможностями расширения благодаря множеству хуков для добавления пользовательских функций и функций.</p><h5><span class="ez-toc-section" id="i-102"> Непревзойденная поддержка </span></h5><p> Наша служба поддержки быстро реагирует на проблемы, быстро исправляет ошибки и всегда готова помочь с индивидуальными потребностями.</p><p> <small> Нравятся иконки, используемые на этом сайте? <br/> Проверьте Roundicons и загрузите их прямо в WPIcons. </small></p><p> <em> Мы всегда стремимся к большему количеству услуг. Следите за новыми в будущем. </em></p><h3><span class="ez-toc-section" id="1-3"> 1. Лицензирование подключаемых модулей </span></h3><p> WPIcons и все надстройки, если не указано иное, лицензируются в соответствии со Стандартной общественной лицензией GNU (http://www.gnu.org/licenses/gpl.html) версии 2.0 или более поздней.</p><h3><span class="ez-toc-section" id="2-3"> 2. Гарантия </span></h3><p> Плагины, продаваемые и распространяемые Code Parrots, делаются с надеждой, что они будут полезны, но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии КОММЕРЧЕСКОЙ ПРИГОДНОСТИ или ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Поскольку WordPress работает правильно при чистой установке самого себя, WPIcons гарантированно будет работать при чистой установке минимальной, стабильной и необходимой версии WordPress для WPIcons и надстроек. Поскольку количество и разнообразие плагинов огромно и разнообразно, мы не гарантируем, что плагин будет работать со всеми сторонними плагинами, темами или браузерами любого типа. Мы не берем на себя ответственность и не будем нести ответственность за любые конфликты или проблемы совместимости, которые могут возникнуть из-за стороннего программного обеспечения. Мы не несем ответственности за потерю данных в результате установки или использования WPIcons. В случае возникновения конфликтов со сторонним программным обеспечением мы можем предоставить поддержку по своему усмотрению. Кроме того, мы не несем ответственности и не будем нести ответственность за любые личные потери, ущерб сайту, ошибки сайта, кражу, мошенничество, упущенную выгоду или доход, потерю бизнеса или возможностей, или потерю клиентов или клиентов в результате установки или с помощью WPIcons.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="3-2"> 3. Поддержка </span></h3><p> Code Parrots продает и распространяет WPIcons и другие плагины «как есть» и не подразумевает, что они будут работать именно так, как вам хотелось бы, или что они будут совместимы со всеми сторонними компонентами и плагинами.</p><p> Поддержка подключаемых модулей, продаваемых и распространяемых Code Parrots, доступна только для тех, у кого есть действующая платная лицензия.</p><p> Поддержка и обновления предоставляются в течение одного года после первоначальной покупки на основании приобретенной лицензии. По истечении одного года покупатель должен продлить свою лицензию, чтобы продолжать получать поддержку и обновления для приобретенных продуктов. Для покупок, включающих автоматически продлеваемую подписку, поддержка будет предоставляться до тех пор, пока подписка остается активной. Исключением является лицензия Ultimate, за которую в момент покупки взимается единовременная плата в размере опубликованной цены лицензии Ultimate. Окончательные лицензии не нужно продлевать, они считаются «пожизненными» и предоставляют владельцу лицензии поддержку и обновления в течение «пожизненного срока», в течение которого покупатель использует WPIcons.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Поддержка и обновления для WPIcons предоставляются до тех пор, пока WPIcons находится в активной разработке. Если произойдет одно из следующих событий, Code Parrots больше не будет нести ответственность за поддержку WPIcons:</p><ul><li> WPIcons больше не разрабатывается как жизнеспособный продукт в рамках Code Parrots.</li><li> WPIcons или материнская компания куплена или выкуплена другой компанией.</li><li> WordPress больше не находится в активной разработке.</li></ul><p> Несмотря на то, что мы пытаемся обеспечить наилучшую возможную поддержку для наших подключаемых модулей, мы не гарантируем, что какой-либо конкретный запрос в службу поддержки может быть или будет дан ответ в той степени или в течение периода времени, когда запрашивающий будет полностью удовлетворен.</p><h3><span class="ez-toc-section" id="4-2"> 4. Подписки и автоматическое продление </span></h3><p> WPIcons продаются в виде автоматически повторяющейся подписки, которая продлевается каждый год в годовщину даты покупки. Это относится к уровням лицензии Personal, Plus и Professional.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Эта подписка будет автоматически продлена в конце годового срока действия лицензии, если только покупатель не отменит свою подписку до даты автоматического продления.</p><p> Обратите внимание на следующие сведения о подписках на лицензии WPIcons (Personal, Plus, Professional):</p><ul><li> Продление подписки выполняется автоматически ежегодно в годовщину вашей первоначальной покупки. Продление лицензии будет продолжаться и оставаться в силе каждый 1 (один) год, если подписка не будет отменена 90 749 до 90 750  до даты продления.</li></ul><ul><li> Вы можете отменить подписку в любое время со страницы своей учетной записи на веб-сайте WPIcons.<ul><li> Если вы решите отменить подписку, вы больше не будете получать обновления и поддержку WPIcons по истечении срока действия лицензии.</li></ul></li></ul><ul><li> Цена продления будет равна полной цене плагина, опубликованной на момент первоначальной покупки, без учета каких-либо скидок.<ul><li> <strong> Устаревшая цена </strong> : Если вы решите отменить подписку, а цена продления ниже текущей указанной цены для вашей лицензии («устаревшая» цена), более низкая цена продления больше не будет вам доступна.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Если вы решите продлить подписку после того, как она была отменена и срок действия вашей лицензии истек, с вас будет взиматься текущая указанная цена за вашу лицензию. Мы не можем применить старые или устаревшие цены к вашей новой покупке продления.</li></ul></li></ul><ul><li> Мы не можем возмещать платежи за продление (только для подписок Personal, Plus, Professional). Мы отправим вам электронное письмо за 2 недели до даты продления, и вы можете использовать эту возможность, чтобы отменить подписку до того, как платеж за продление будет обработан автоматически.<ul><li> Если вы решите отменить подписку, срок действия вашей лицензии истечет в годовщину первоначальной покупки, и вы больше не будете получать обновления и поддержку WPIcons.</li></ul></li></ul><p> Исключением из этого соглашения о подписке является лицензия Ultimate, которая представляет собой единовременную плату в размере опубликованной цены лицензии Ultimate на момент покупки. Лицензии Ultimate не нужно продлевать, они считаются «пожизненными».<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="5-2"> 5. Использование лицензии </span></h3><p> WPIcons предоставляет каждому клиенту непередаваемую лицензию на использование программного обеспечения для внутреннего использования в соответствии с условиями, установленными в выбранном клиентом пакете лицензий (Personal, Plus, Professional, Ultimate).</p><p> Если лицензионный пакет позволяет использовать программное обеспечение на нескольких сайтах (Plus, Professional, Ultimate), покупатель/владелец лицензии не может продавать первоначально приобретенный лицензионный ключ, предоставленный Code Parrots, другим пользователям лицензии ( таких как клиенты) в коммерческих целях. Кроме того, заказчик не может сублицензировать какому-либо физическому или юридическому лицу какие-либо права на распространение программного обеспечения или лицензионного ключа. WPIcons будет предоставлять услуги поддержки только первоначальному клиенту / владельцу лицензии с законным лицензионным ключом и рассматривать любое другое использование этого лицензионного ключа для запросов поддержки как мошенническое.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="6"> 6. Автоматические обновления </span></h3><p> Автоматические обновления доступны владельцам лицензий, у которых есть активная и действующая подписка и лицензионный ключ. Автоматические обновления доступны для WPIcons и всех других установленных надстроек WPIcons. Автоматические обновления доступны до тех пор, пока лицензионный ключ, сгенерированный при покупке, действителен и активен.</p><h3><span class="ez-toc-section" id="7"> 7. Доставка плагина </span></h3><p> После того, как мы успешно обработаем ваш платеж, вы получите электронное письмо с номером вашего заказа и другой информацией о покупке. Ваш лицензионный ключ доступен в вашей учетной записи вместе с вашими загружаемыми плагинами. Вы можете скачать плагин, войдя в учетную запись, созданную для вас при покупке плагина, и нажав на соответствующую ссылку.</p><p> Если вы не получили электронное письмо с вашей информацией, вы можете связаться с нами через https://www.wpicons.com/support, чтобы запросить информацию о покупке.</p><p> Доступ к повторной загрузке купленных файлов будет предоставлен до тех пор, пока ваш лицензионный ключ действителен.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Если срок действия лицензионного ключа истек, доступ к загрузке связанных файлов будет прекращен до тех пор, пока лицензионный ключ не будет обновлен.</p><h3><span class="ez-toc-section" id="8"> 8. Право собственности </span></h3><p> Все плагины являются собственностью Code Parrots. Категорически запрещается претендовать на какие-либо интеллектуальные или исключительные права собственности на наши продукты.</p><p> Наши плагины предоставляются «как есть» без каких-либо явных или подразумеваемых гарантий. Мы не несем ответственности за любые убытки, включая, помимо прочего, прямые, непрямые, особые, случайные или косвенные убытки или убытки, возникшие в результате использования или невозможности использования наших плагинов.</p><h3><span class="ez-toc-section" id="9"> 9. Содержание веб-сайта и плагина </span></h3><p> Весь контент, найденный на этом сайте и в плагине, включая изображения, документацию, запросы в службу поддержки и любую другую информацию, является собственностью Code Parrots и не может распространяться без разрешения или согласия.</p><h3><span class="ez-toc-section" id="10"> 10. Изменения цен </span></h3><p> Code Parrots оставляет за собой право изменять, изменять, отменять или обновлять подписку на плагин и/или лицензионный ключ без предварительного уведомления или согласия.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Цены на все продукты могут быть изменены без предварительного уведомления или согласия.</p><h3><span class="ez-toc-section" id="11"> 11. Политика возврата средств </span></h3><p> Мы твердо верим в наш продукт и поддерживаем его на 100%, но мы понимаем, что он не может работать идеально для всех все время. Если вы хотите запросить возврат средств, откройте заявку в службу поддержки «Запрос на возврат». При запросе возврата мы почтительно просим вас выполнить следующие условия политики возврата:</p><p> Условия приемлемости для запроса на возврат:</p><ul><li> Вы находитесь в течение первых 30 дней с момента первоначальной покупки плагина.<ul><li> Мы не можем предоставить возмещение по истечении первых 30 дней с момента первоначальной покупки.</li><li> Мы не можем возмещать платежи за продление (только для подписок Personal, Plus, Professional). Мы отправим вам электронное письмо за 2 недели до даты продления, и вы можете воспользоваться этой возможностью, чтобы отменить подписку до того, как платеж за продление будет обработан автоматически.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul></li></ul><ul><li> Причина, по которой вы запрашиваете возмещение, может быть одной из следующих:<ul><li> Вы приобрели плагин/подписку и после установки и тестирования плагина обнаружили, что он не подходит для вашего бизнеса или требует настройки.</li><li> У вас есть проблема, которую мы не можем решить, что делает систему непригодной для использования. Мы можем задать вам вопросы о характере вашего запроса на возмещение, чтобы мы могли улучшить плагин в будущем.<ul><li> Если ваша проблема возникает из-за того, что вы не можете правильно установить подключаемый модуль или заставить его выполнять свои основные функции, мы с радостью рассмотрим ваш запрос на возврат средств.</li></ul></li></ul></li></ul><ul><li> Вы связались с нашей службой поддержки и разрешили нам решить вашу проблему или объяснили, почему плагин не будет работать для вас.<ul><li> Обратите внимание, что технические проблемы, вызванные сторонними плагинами, темами или другим программным обеспечением, не являются основанием для возврата средств.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul></li></ul><ul><li> Вы соглашаетесь деактивировать и удалить плагин с вашего сайта, если будет предоставлено возмещение.</li></ul><p> Возмещение будет предложено по нашему собственному усмотрению. Приобретая плагин(ы) на нашем сайте, вы соглашаетесь с этой политикой возврата средств и отказываетесь от любых прав на любые вопросы, суждения или судебные иски. Мы не обязаны покрывать разницу в обменных курсах между моментом покупки и моментом возврата средств.</p><h3><span class="ez-toc-section" id="12"> 12. Электронная почта </span></h3><p> Code Parrots может время от времени отправлять вам электронные письма, связанные с покупкой продуктов в нашей компании. Мы также можем время от времени отправлять вам информационные бюллетени по электронной почте, касающиеся обновлений WPIcons, рекламных акций, надстроек WPIcons и тому подобного. Мы никогда не будем продавать или передавать вашу электронную почту каким-либо сторонним поставщикам. Вы можете отказаться от этих электронных писем в любое время без каких-либо штрафных санкций.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="13"> 13. Лицензионное соглашение </span></h3><p> Приобретая наш продукт(ы), вы подтверждаете, что прочитали и согласны с Условиями и положениями, перечисленными и подробно описанными на этой странице. Мы оставляем за собой право изменять или модифицировать текущие положения и условия без предварительного уведомления или согласия.</p><h3><span class="ez-toc-section" id="14"> 14. Делимость </span></h3><p> Если какая-либо часть настоящего соглашения будет объявлена ​​не имеющей исковой силы или недействительной, все остальные пункты этого соглашения останутся обязательными для клиента.</p><h3><span class="ez-toc-section" id="i-103"> Максимальная </span></h3><ul><li> <sup> $ </sup> 99
купить сейчас  одноразовый платеж</li><li itemprop="additionalPropery"> <strong> Включены все основные функции </strong></li><li itemprop="additionalPropery"> <strong> Сервисы иконок
907:50</li><li itemprop="additionalPropery"> ПЛЮС все будущие службы значков сторонних производителей</li><li itemprop="additionalPropery"> <strong> Пожизненные обновления плагинов </strong></li><li itemprop="additionalPropery"> <strong> Пожизненная поддержка по электронной почте </strong></li><li itemprop="additionalPropery"> <strong> 10 участков </strong></li></ul><p data-readability-styled="true"> Самый популярный</p><h3><span class="ez-toc-section" id="i-104"> Плюс </span></h3><ul><li> <sup> $ </sup> 39
купить сейчас  в год</li><li itemprop="additionalPropery"> <strong> Включены все основные функции  907:50</li><li itemprop="additionalPropery"> <strong> Сервисы иконок </strong></li><li itemprop="additionalPropery"> ПЛЮС все будущие службы значков сторонних производителей</li><li itemprop="additionalPropery"> Обновления плагинов *</li><li itemprop="additionalPropery"> Поддержка по электронной почте *</li><li itemprop="additionalPropery"> <strong> 3 площадки </strong></li></ul><h3><span class="ez-toc-section" id="i-105"> Личный </span></h3><ul><li> <sup> $ </sup> 29
купить сейчас  в год</li><li itemprop="additionalPropery"> <strong> Включены все основные функции  907:50</li><li itemprop="additionalPropery"> Обновления плагинов *</li><li itemprop="additionalPropery"> Поддержка по электронной почте *</li><li itemprop="additionalPropery"> <strong> 1 место </strong></li><li itemprop="additionalPropery"> <strong> Примечание: </strong> Службы Icon не включены</li></ul><p> * Обновления подключаемых модулей (включая службы значков, которые будут выпущены в будущем) и поддержка по электронной почте предоставляются в течение срока действия вашей текущей подписки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> <br/> Примечание. Доступ к пакетным службам значков предоставляется только обладателям лицензий Plus и Ultimate. <br/> Все покупки регулируются нашими условиями использования.</p><p> Службы сторонних значков доступны только обладателям лицензий <strong> Plus </strong> или <strong> Ultimate </strong>. Владельцы лицензий WPIcons Pro Plus и Ultimate также получат любые дополнительные подключения к сервису значков, которые мы выпустим в будущем.</p><h5><span class="ez-toc-section" id="i-106"> Простая настройка </span></h5><p> WPIcons будут запущены и запущены через несколько секунд. Просто установите и активируйте, и вы готовы добавлять значки на свой сайт!</p><h5><span class="ez-toc-section" id="i-107"> Адаптивные значки </span></h5><p> Значки, созданные с помощью WPIcons, выглядят потрясающе на любом устройстве. Иконки будут расширяться и сжиматься без <em> любая </em> потеря качества.</p><h5><span class="ez-toc-section" id="_490-2"> Более 490 значков в комплекте </span></h5><p> WPIcons поставляется в комплекте с более чем 490 высококачественными адаптивными значками шрифтов, которые помогут вам начать работу.</p><h5><span class="ez-toc-section" id="i-108"> Поддержка нескольких сайтов </span></h5><p> WPIcons поддерживает работу с несколькими сайтами, что позволяет вам устанавливать различные наборы значков на каждом сайте в сети.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Настройки также не зависят от сайта, на котором установлен плагин.</p><h5><span class="ez-toc-section" id="i-109"> Блоки значков </span></h5><p> Добавляйте значки к любому сообщению или странице с помощью наших настраиваемых блоков значков WordPress. Быстро и легко обновляйте значки замены внешнего вида.</p><h5><span class="ez-toc-section" id="_SVG-25"> Пользовательские значки SVG </span></h5><p> Загрузите пользовательские значки .svg непосредственно в плагин. Плагин возьмет на себя всю тяжелую работу по установке иконок на ваш сайт.</p><h5><span class="ez-toc-section" id="_Unlimed-2"> Наборы значков Unlimed </span></h5><p> Установите неограниченное количество значков в формате шрифта или svg и наборов значков с помощью WPIcons Pro — предела нет!</p><h5><span class="ez-toc-section" id="i-110"> Индивидуальные настройки значков </span></h5><p> Воспользуйтесь нашим встроенным средством настройки значков, чтобы придать своим значкам полностью индивидуальный вид. Меняйте цвета, добавляйте анимацию или состояния наведения, превращайте значки в ссылки… и многое другое!</p><h5><span class="ez-toc-section" id="i-111"> Значки меню </span></h5><p> Быстро и легко добавляйте любые значки, содержащиеся в WPIcons, к пунктам меню.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Настройте свои меню, даже не касаясь кода!</p><h5><span class="ez-toc-section" id="Icon_Services-2"> Icon Services* </span></h5><p> Подключите свой сайт к лучшим в мире поставщикам значков, чтобы получить доступ к сотням тысяч дополнительных значков .svg.</p><h5><span class="ez-toc-section" id="i-112"> Полностью интернационализированный </span></h5><p> WPIcons готов к переводу на ваш язык. Как всегда, переводы приветствуются!</p><h5><span class="ez-toc-section" id="i-113"> Скачать наборы иконок </span></h5><p> Быстро загружайте любой установленный набор значков одним нажатием кнопки, что позволяет легко перемещать наборы значков между сайтами.</p><h5><span class="ez-toc-section" id="i-114"> Готов к работе </span></h5><p> Тщательно протестированный и созданный с учетом скорости, WPIcons отлично работает на всех сайтах; от большого к маленькому и все между ними.</p><h5><span class="ez-toc-section" id="_WordPress-3"> Сделано для WordPress </span></h5><p> WPIcons и похоже на WordPress; бесшовно интегрируется. Он живет на вашем веб-сайте (а не на чьем-то еще), поэтому у вас есть полный контроль.</p><h5><span class="ez-toc-section" id="i-115"> Расширенная документация </span></h5><p> У нас есть вся необходимая документация, которая поможет вам быстро приступить к работе.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Столкнулись с проблемами? Мы вас прикрыли!</p><h5><span class="ez-toc-section" id="i-116"> Удобен для разработчиков </span></h5><p> WPIcons обладает широкими возможностями расширения благодаря множеству хуков для добавления пользовательских функций и функций.</p><h5><span class="ez-toc-section" id="i-117"> Непревзойденная поддержка </span></h5><p> Наша служба поддержки быстро реагирует на проблемы, быстро исправляет ошибки и всегда готова помочь с индивидуальными потребностями.</p><p> Службы Icon доступны только для <strong> Plus </strong> или <strong>Ultimate </strong> владельцев лицензий. Эти держатели лицензий также получат любые дополнительные соединения службы значков, которые мы выпустим в будущем.</p> <br/><h5><span class="ez-toc-section" id="i-118"> Иконфайндер </span></h5><h3><span class="ez-toc-section" id="_Iconfinder"> Об Iconfinder </span></h3><blockquote cite="http://www.worldwildlife.org/who/index.html"><p> Iconfinder предоставляет высококачественные значки миллионам творческих профессионалов. Мы небольшая международная команда, базирующаяся в прекрасном городе Копенгагене, некоторые из нас работают удаленно. Вместе с увлеченным сообществом дизайнеров иконок мы создаем самый популярный в мире сайт иконок.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p> — Иконфайндер</blockquote><h5><span class="ez-toc-section" id="8-2"> Иконки8 </span></h5><h3><span class="ez-toc-section" id="_Icons8"> О Icons8 </span></h3><blockquote cite="https://icons8.com/about/"><p> Icons8 позволяет дизайнерам выражать свои идеи, давая право на проектирование элементов в нужное время.</p> — Иконки8</blockquote><h5><span class="ez-toc-section" id="i-119"> Проект «Существительное» </span></h5><h3><span class="ez-toc-section" id="_Noun"> О проекте Noun </span></h3><blockquote cite="https://thenounproject.com/about/"><p> Создание, совместное использование и прославление визуального языка мира.</p> — Проект существительного</blockquote><h4><span class="ez-toc-section" id="i-120"> Что говорят наши клиенты </span></h4><ul><li><p data-readability-styled="true"> WPIиконки</p><h5><span class="ez-toc-section" id="JacobWolf"> JacobWolf </span></h5><p> ★★★★★</p><p> Плагин WPIcons может быть лучшим, что когда-либо было в Интернете. SVG — это заноза в заднице, но она работает гладко.</p></li><li><p data-readability-styled="true"> WPIиконки</p><h5><span class="ez-toc-section" id="i-121"> Валенки </span></h5><p> ★★★★★</p><p> Очень полезный плагин и отличная поддержка! Удивительная функциональность, которая действительно облегчает мою жизнь как веб-дизайнера. Это программное обеспечение просто потрясающе!</p><p> <strong> Всем очень рекомендую! </strong></p></li><li><p data-readability-styled="true"> WPIиконки</p><h5><span class="ez-toc-section" id="Konehead"> Konehead </span></h5><p> ★★★★★</p><p> Плагин WordPress Icons SVG идеально подходит для добавления SVG-графики на ваш сайт WordPress.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></div><div class="post-meta"></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/sajt/poseshhaemost-vliyaet-na-poziciyu-sajta-kak-vliyaet-poseshhaemost-sajta-na-pozicii-v-gugl-i-yandeks.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Посещаемость влияет на позицию сайта: Как влияет посещаемость сайта на позиции в Гугл и Яндекс</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/emocionalnye-kartinki-bolshe-100-besplatnyx-fotografij-na-temu-emocionalnoe-i-emocii.html" rel="next"><span class="meta-nav">Следующая запись</span> Эмоциональные картинки: Больше 100 бесплатных фотографий на тему «Эмоциональное» и «»Эмоции</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/ikonki-svg-vektornye-ikonki-i-stikery-png-svg-eps-psd-i-css.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='17631' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="f29233f8b86c61a28fb4762d-|49" defer></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>