Бесплатные svg иконки – Бесплатные иконки SVG, PNG, ICO или ICNS

19.09.2020 alexxlab

Содержание

Лучшие ресурсы с бесплатными иконками в формате SVG

Привет, друзья. Дизайнеры всё чаще и чаще используют в своих работах иконки в формате SVG, так как эти иконки при любом разрешении экрана остаются качественными на вид. Это огромный плюс данного формата, и огромный скачёк в будущее веб — дизайна. Сегодня я хочу представить Вам несколько ресурсов, на которых Вы совершенно бесплатно сможете скачать иконки формата SVG. Думаю, что данная подборка будет очень полезна.

Спасибо большое http://www.noupe.com и рекомендую:

Этот сайт с иконками в стиле Flat включает в себя более 60 000 бесплатных векторных иконок, которые можно загрузить в разнообразных форматах, таких как EPS, PSD, SVG или же PNG. Чтобы Вы смогли быстро найти нужную Вам иконку обязательно пользуйтесь очень удобным поиском, который встроен в сайт.

Это просты иконки которые великолепно смотрятся. Они совершенно бесплатны для коммерческого и личного использования, так же никаких лишних движений не требуется чтобы скачать данные иконки.

Это отличный сайт для поиска фантастических иконок в формате SVG для создания современного веб и мобильного дизайна. Так же тут есть интуитивно понятный и очень удобный поиск, который поможет найти именно ту иконку которая нужна.

Простые но бесплатные иконки, которые доступны для скачивания в нескольких форматах, а именно EPS, PNG, SVG и в векторе. И конечно же есть очень удобный поиск по иконкам.

Это подборка бесплатных SVG иконок социальных сетей, которые к тому же можно с лёгкостью разместить горизонтально на любом сайте. Так же Вы можете посмотреть иконки в действии.

Бесплатные иконки шрифты, которые Вы можете совершенно бесплатно использовать на своём сайте. Так же тут Вы можете скачать те же и конки и в формате SVG

Этот сайт позволит Вам скачать не более 200 иконок и для 5 пользователей за раз. Чтобы скачать больше иконок нужно будет заплатить. Но, честно сказать, иконки чертовски качественные и в круглой форме.

Это удивительный и настраиваемый генератор, который позволит настроить цвет, размер и ещё несколько параметров для иконок. После того как иконки будут настроены Вы с лёгкостью сможете их скачать в формате SVG.

Кто сделал огромную работу собрав бесплатные SVG иконки в одном месте из Dribbble. Под каждой иконкой есть ссылка на оригинал.

beloweb.ru

Где взять svg код иконок? — Toster.ru

Есть ли где-то svg код иконок для html?
Сейчас использую awesome , но хотелось бы убрать лишние скрипты, и что лучше: awesome или svg код, на странице по 20-30 таких кодов может быть?

Имею ввиду такое

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                  <path d="M9.09090909,8 C8.48484848,8 8,8.48484848 8,9.09090909 L8,13.7878788 C8,14.3939394 8.48484848,14.8787879 9.09090909,14.8787879 L13.7878788,14.8787879 C14.3939394,14.8787879 14.8787879,14.3939394 14.8787879,13.7878788 L14.8787879,9.09090909 C14.8787879,8.48484848 14.3939394,8 13.7878788,8 C13.7878788,8 12.2222222,8 9.09090909,8 Z M22.9090909,8 L18.2121212,8 C17.6060606,8 17.1212121,8.48484848 17.1212121,9.09090909 L17.1212121,9.09090909 L17.1212121,13.7878788 C17.1212121,14.3939394 17.6060606,14.8787879 18.2121212,14.8787879 L18.2121212,14.8787879 L22.9090909,14.8787879 C23.5151515,14.8787879 24,14.3939394 24,13.7878788 L24,13.7878788 L24,9.09090909 C24,8.48484848 23.5151515,8 22.9090909,8 C22.9090909,8 22.9090909,8 22.9090909,8 Z M13.7878788,17.1212121 L9.09090909,17.1212121 C8.48484848,17.1212121 8,17.6060606 8,18.2121212 C8,18.2121212 8,18.2121212 8,18.2121212 L8,22.9090909 C8,23.5151515 8.48484848,24 9.09090909,24 L9.09090909,24 L13.7878788,24 C14.3939394,24 14.8787879,23.5151515 14.8787879,22.9090909 L14.8787879,22.9090909 L14.8787879,18.2121212 C14.8787879,17.6060606 14.3939394,17.1212121 13.7878788,17.1212121 L13.7878788,17.1212121 Z M22.9090909,17.1212121 L18.2121212,17.1212121 C17.6060606,17.1212121 17.1212121,17.6060606 17.1212121,18.2121212 L17.1212121,18.2121212 L17.1212121,22.9090909 C17.1212121,23.5151515 17.6060606,24 18.2121212,24 L18.2121212,24 L22.9090909,24 C23.5151515,24 24,23.5151515 24,22.9090909 L24,22.9090909 L24,18.2121212 C24,17.6060606 23.5151515,17.1212121 22.9090909,17.1212121 C22.9090909,17.1212121 22.9090909,17.1212121 22.9090909,17.1212121 Z" fill-rule="nonzero" fill="#0099D3">
                  </path>
                </svg>

toster.ru

Создание svg иконок для сайта (favicon svg)

От автора: простые, часто геометрические и выполненные в различных размерах иконки (favicon) отлично подходят под SVG формат. К сожалению, до недавнего времени браузеры очень плохо поддерживали SVG фавиконы. В Firefox 41 появилась поддержка данного формата, в Safari 9 для десктопной и мобильной версии (с некоторыми уступками). Однако в IE/Edge и Chrome все еще нет поддержки, по крайней мере, на данный момент. Тем не менее, ситуация вскоре изменится (должна измениться). Так что стоит уделить немного времени и изучить возможности и синтаксис SVG фавиконов, дабы подготовить ваш сайт к грядущим временам.

Проблема

С момента создания картинки 16х16 пикселей изменилась сама концепция фавиконов. Теперь фавикон должен работать с целой серией иконок, заточенных под тачскрины, с плиточным интерфейсом новых версий Windows, со специальными возможностями Retina дисплеев и т.д. Комплексное решение (от realfavicongenerator) включает в себя довольно длинный список всевозможных вариантов:

Хотя большинство из этих файлов можно и просто положить в корень вашего сайта, а соответствующие приложения выберут, что им необходимо, не прописывая все их в явном виде в HTML, все же это не самый удачный подход. Слишком много контента нужно создать, а потом еще и обслуживать. Один масштабируемый файл будет работать намного лучше. К примеру, логотип нашего сайта сохранен в формате favicon.svg:

Создание svg иконок для сайта (favicon svg)

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

<title>the new code favicon</title>

</svg>

И выглядит так:

Фавикон можно добавить строкой кода между тегов head:

Несколько замечаний:

Составляющие рисунка выполнены отдельными, не перекрывающими друг друга фигурами: значок должен иметь размер 16х16 пикселей. Тут важны простота и четкость.

По тем же самым причинам фон в SVG иконке прозрачный, так что ее можно использовать в различных ситуациях.

Viewbox для SVG должен быть квадратным.

Рисунок должен занимать наибольшую площадь на viewBox’е (холст в SVG).

Тег <title> описывает цели, для которых предназначен рисунок; также стоит добавить <desc> и <title> для каждого полигона <polygon>.

Необходимо по максимуму оптимизировать и минифицировать ваш SVG, чтобы файл на выходе получился как можно меньше.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Чтобы SVG заработал необходимо указывать MIME тип image/svg+xml.

Добавляем поддержку iOS

В iOS 9 также поддерживаются SVG фавиконы в закрепленных закладках, но с некоторыми оговорками:

Элементы SVG должны быть черного цвета.

В ссылке на фавикон должен быть указан неофициальный атрибут mask-icon.

Не обязательно, но цвет можно изменить также с помощью неофициального атрибута color. Поддерживаемые значения hexadecimal, keyword и rgb. Не рекомендуется использовать яркие цвета.

Учитывая вышеописанные условия, я бы использовал новый SVG файл без информации о цветах:

<title>the new code favicon</title>

<polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125

298.5,82.5 200.6,154.5″ />

<polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6

399.1,192.2 340.2,154.5 199.5,255.9″ />

</svg>

Чтобы это заработало на iOS, добавляем строку:

Собираем мысли вместе

Предположим, что вам больше не нужно поддерживать IE8 и более ранние версии, значит, формат .ico можно выбросить, а браузерам оставить файл PNG. Чтобы фавикон отображался во всех браузерах и не забыть про SVG, расположим ссылки в следующем порядке:

Мы отказались от использования формата .ico: если бы мы положили в корень сайта файл favicon.ico, то браузеры использовали бы его вместо остальных, и не важно какие директивы вы указали в хедере.

Для iOS и IE все еще нужно указывать отдельные иконки; SVG в данных браузерах еще не работает.

Заключение

SVG как будто создан для фавиконов, и остается только надеяться, что в скором будущем и Chrome будет его поддерживать. Идеальным было бы, чтобы в одном SVG файле для различных степеней детализации и размеров использовались разные элементы <symbol> или <use>… хотя мы и так уже хотим слишком многого.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Бесплатные svg иконки – Бесплатные иконки SVG, PNG, ICO или ICNS

Лучшие ресурсы с бесплатными иконками в формате SVG

Где взять svg код иконок? — Toster.ru

Создание svg иконок для сайта (favicon svg)

Проблема

Добавляем поддержку iOS

Собираем мысли вместе

Заключение

PSD to HTML

Добавить комментарий Отменить ответ