Svg для сайта: Используем SVG на сайте / Хабр

SVG

SVG

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

В основном, дизайнеры используют в работе векторные графические пакеты Sketch, Illustrator. Значительно реже идут в ход профориентированные под работу с SVG графические пакеты, такие как например Inkscape.

Подробонее про графические пакеты и js-библиотеки:

• Top 15 Free SVG Tools for Graphic & Web Designers
• MDN: Tools for SVG

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

• минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
• разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
• применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
• добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

• 2015. solarsysto.ru
• 2016.solarsysto.ru
• 2017.solarsysto.ru

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

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

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

3. Оптимизируем вектор в иллюстраторе

Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости — вырезать друг из друга.

Было:

Стало:

4. Сохраняем: File / Save As

В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).

5. Знакомимся с диалоговым окном сохранения

• SVG Profiles
  По умолчанию используется SVG 1.1
• Fonts
  Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
  Type / SVG — Нужен в случае, если в SVG встраивается текст
  Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
• Options
  Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
  Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
  Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
• More options
  Трогать для решения наших задач необязательно.
• SVG Code
  Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

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

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

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

6. Иконка планеты

Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.

7. На выходе получаем SVG или SVGZ файл

Формат:	Без оптимизации векторной формы в иллюстраторе *	С учетом оптимизации векторной формы в иллюстраторе *
SVG	36 813 bytes	35 941 bytes
SVGZ	15 310 bytes	15 214 bytes

* Пункт 3 перечня выше: Как оптимизировать сам вектор в иллюстраторе?

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

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

Пример:

css — На сайте много svg-иконок, как лучше с ними взаимодействовать?

Когда вы используете команду <use> SVG попадает, в так называемый Shadow DOM

.
SVG вроде, как есть и нет его в тоже время. Так как на него хранится из основного DOM только ссылка. Поэтому нужно, чтобы свойства fill, stroke, stroke-width принудительно наследовались.

path {
fill:inherit;
stroke:inherit;
}

В примере ниже я присвоил каждому <use> клону иконки свой класс и теперь их можно стилизовать вместе и по отдельности при наведении :hover

svg {
  width: 40px;
  height: 40px;
}

path {
fill:inherit;
stroke:inherit;

}

  use.
  home, use.toggle {
  fill: black;
}

use.home:hover {
fill:red;
}

 use.toggle:hover {
  fill: green;
}

<svg display="none" xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 14 14">
    <mask mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.000152588h23.717V13.272H0V0.000152588Z"/>
    </mask>
    <g mask="url(#mask0)" >
      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.92999 9.71699H7.78499V6.91199H5.92999V9.71699ZM8.28499 10.717H5.42999C5.15299 10.717 4.92999 10.493 4.92999 10.217V6.41199C4.92999 6.13599 5.15299 5.91199 5.42999 5.91199H8.28499C8.56199 5.91199 8.78499 6.13599 8.78499 6.41199V10.217C8.78499 10.493 8.56199 10.717 8.28499 10.717Z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5859 13.272h4.13092C2.85492 13.272 2.63092 13.048 2.63092 12.  772V6.31601C2.63092 6.04001 2.85492 5.81601 3.13092 5.81601C3.40692 5.81601 3.63092 6.04001 3.63092 6.31601V12.272h20.0859V6.31601C10.0859 6.04001 10.3099 5.81601 10.5859 5.81601C10.8619 5.81601 11.0859 6.04001 11.0859 6.31601V12.772C11.0859 13.048 10.8619 13.272 10.5859 13.272Z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2168 7.3584C13.0888 7.3584 12.9608 7.3094 12.8628 7.2124L6.85882 1.2074L0.853817 7.2124C0.657817 7.4074 0.341817 7.4074 0.146817 7.2124C-0.0491831 7.0164 -0.0491831 6.7004 0.146817 6.5044L6.50482 0.146403C6.69982 -0.0485974 7.01682 -0.0485974 7.21182 0.146403L13.5708 6.5044C13.7658 6.7004 13.7658 7.0164 13.5708 7.2124C13.4728 7.3094 13.3448 7.3584 13.2168 7.3584Z" />
    </g>
  </symbol>
  
  <symbol viewBox="0 0 28 22">
  <path opacity="0.5" d="M0 15.7143h38V12.5714H0V15.7143ZM0 22h38V18.8571H0V22ZM0 9.42857h38V6.28571H0V9.42857ZM0 0V3.14286h38V0H0Z" fill="black"/>
  </symbol>
</svg>

<svg>
  <use href="#home" ></use>
</svg>
<svg>
  <use href="#toggle" ></use>
</svg>

Ну и ещё вопросец: почему не применяется стиль при наведении?

Всё по той же причине, что и в первом примере. Надо сначала прописать принудительное наследование inherit

svg {
  width: 30vw;
  height: 30vh;
}

path {
fill:inherit;
stroke:inherit;
}

use.tog {
stroke:black;
}

use.tog:hover {
stroke:green;
cursor:pointer;
}
/* Работает только в Firefox
 .first-line:hover{
stroke:green;
cursor:pointer;
}
.second-line:hover {
stroke:blue;
cursor:pointer;
}
 .third-line:hover {
stroke:gold;
cursor:pointer;
}*/

<svg  xmlns="http://www.w3.org/2000/svg">
  <symbol>
     <path d="M0 5 H 90" stroke-width="2" />
     <path d="M0 10 H 90" stroke-width="2" />
     <path d="M0 15 H 90" stroke-width="2" />
  </symbol>
</svg>

<svg  viewBox="0 0 16 24">

<use xlink:href="#toggle" href="#toggle" ></use>
</svg>

Сейчас идет переходной период, некоторые браузеры перешли на короткую запись только href Другие браузеры не перешли (IOS Safari) и поэтому понимают только xlink:href="" С другой стороны, когда будет принят стандарт SVG2 длинная запись будет запрещена

Поэтому уже сейчас часто вижу комбинированную запись:

<use xlink:href="#toggle" href="#toggle" ></use>

Если вы хотите, чтобы у вас работала анимация, то сразу пропишите её внутри svg файла, до клонирования SVG командой USE

Несколько практических советов:

Если вы сделали всё правильно, но одна или несколько иконок не поддаются стилизации, то логично предположить, что всё дело в иконке.

1. Во первых удалите все стили внутри иконки, так как у SVG довольно сложная схема иерархии стилей. Например если внутри иконки прописан атрибут представления <path ...style="fill:black" />, то вы не сможете его изменить внешними стилями CSS
   Конечно можно применить !important css но это очень опасный метод.
2. Необходимо посмотреть код используемой иконки. Если есть внутри clip-Path mask, pattern, filter, gradient то это прямой путь к проблемам стилизации.
3. Элементы SVG нарисованы двойными контурами. То есть иконку рисовали не подходящими инструментами (карандаш, кисть) Такую иконку тоже будет проблематично стилизовать. Будет закрашиваться не объем, а узкое расстояние между контурами.
4. Иконка в формате base64 стилизуется только с помощью фильтров.
5. Главный признак, чем больше код (>1kb) тем более вероятно, что иконка нарисована не профессионалом и с ней неизбежно будут проблемы.
6. Иконки взятые из разных мест имеют разные viewBox, разную структуру внутреннего кода <defs>, <symbol>, <g> подгоняя их под один размер опять возникают проблемы с позиционированием.

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

Ниже набор ссылок откуда вы можете скачать стандартные иконки практически для всех целей:

1. Гугловские иконки

2. materialui.co/icons

3. https://materialdesignicons.com/

4. https://iconify.design/icon-sets/uil/

5. https://iconmonstr.com/

40+ лучших веб-сайтов для загрузки бесплатных иллюстраций SVG

В наши дни контент-маркетинг стал неотъемлемой частью бизнеса, и иллюстрации интерпретируют идею быстрее, чем слова. Автор выражает цель статьи словами, которые соответствуют сути, и сосредотачивается на поиске иллюстрации, которая подчеркивает цель. Таким образом, идея доводится до жизнеспособной аудитории без каких-либо недостающих частей.

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

Решение: Множество бесплатных иллюстраций, доступных для скачивания (и разрешенных для использования в коммерческих проектах).

Ну, у нас нет свободы вводить ключевые слова в Google и выбирать понравившуюся картинку из обширной коллекции результатов поиска. Особенно, когда вы выполняете задачу, которая приносит деньги. Ваш контент нарушил бы авторские права на изображение.

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

---

Здесь мы составили список лучших веб-сайтов, которые предоставляют бесплатные иллюстрации для дизайнеров, разработчиков и создателей контента в различных форматах, таких как — SVG, PNG и других.

 

Undraw

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

Сайт выполнен в минималистичном стиле, и вы можете выбрать цвет изображений, который соответствует вашему фирменному стилю. Объяснять на этом сайте особо нечего. Все, что вам нужно сделать, это просто изучить и скачать.

 

Manypixels

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

 

Абсурдный дизайн

Это самый интересный сайт в этом списке. Все на этом сайте несовершенно, и это делает его более интересным.

Абсурдный дизайн, как следует из названия, содержит коллекцию странных иллюстраций, обладающих вдохновляющей аурой. Они похожи на каракули, которые не имеют смысла, но все же способны повысить ценность платформы, на которой они использовались.
У них есть как бесплатный, так и премиальный план членства. Мы не говорим, что все на сайте бесплатно. Есть ограничения. Вам просто нужно посетить, чтобы узнать о них больше.

 

Humaaans

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

 

Drawkit

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

 

Ой

Это иллюстрационный проект icons8, специально разработанный для различных типов экранов и страниц приложений. Они классифицировали иллюстрации по разным категориям от 404 до электронной коммерции, у них есть что-то для всех.

 

Дизайн IRA

Иллюстрация дизайна IRA мало чем отличается от любых других сайтов иллюстраций, у них есть множество вариантов настройки перед загрузкой иллюстраций. Вы можете выбрать определенный градиент на их сайте и настроить перед загрузкой, все их иллюстрации основаны на градиенте и разделены на разные категории.

 

Lukaszadam

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

 

Illustratious

Illustratious предлагает бесплатные иллюстрации высокого разрешения, подходящие для веб-сайтов и приложений. Самое замечательное в illustratious — это их открытая лицензия, вы можете использовать иллюстрации в своих личных и коммерческих проектах, не спрашивая их разрешения. Веб-сайт очень понятен, просто изучите и загрузите иллюстрации.

 

FreePik

Причина, по которой это последнее место в списке, заключается в том, что FreePik довольно известен. Это не требует представления для людей, которые находятся в этой работе некоторое время.
Это хранилище огромной коллекции бесплатных и премиальных изображений, SVG и PSD. Некоторые крупные компании, такие как Microsoft, Amazon и Spotify, используют ресурсы этого сайта, что является убедительным доказательством его популярности.

---

Iconscout

Iconscout — это бесплатная иллюстрация для коммерческого использования, дизайна веб-сайтов и векторов. Эту бесплатную иллюстрацию можно скачать в форматах PNG, SVG, EPS, AI и других форматах. Эта иллюстрация с небольшими элементами превращает простые значки в динамичные формы. Иллюстрации, которые позволяют устоявшемуся бренду с сильным посланием, набирают популярность среди компаний. Эти иллюстрации создали особую тенденцию в сфере веб-дизайна, способствуя укоренившейся адаптивности. С помощью одной иллюстрации ваш продукт и услуга будут представлены без абзаца вокруг них.

Freevector

Freevector поставляется со всеми основными элементами, которые вам понадобятся для поиска. Эта бесплатная иллюстрация содержит логотипы, векторы иллюстраций, наборы иконок и категории для более удобного начала изучения. Кроме того, Freevector имеет обширную коллекцию графики, в которой вы можете выбирать из примерно 16 000 изображений. Более того, с помощью всего лишь оснастки вы можете легко зарегистрироваться через Facebook. Здесь Freevector предоставит вам плоский, трехмерный, жирный и мультяшный вектор.

Streamline Icons

Streamline Icons поставляется с огромной коллекцией из более чем 780 бесплатных векторных эмодзи. Либо загрузите их все, либо просмотрите, чтобы найти свой любимый. Кроме того, эта иллюстрация содержит 3000 векторных иллюстраций для ваших веб-сайтов, приложений, маркетинговых и печатных материалов. В Streamline Icons есть все, от жирных глифов до минималистичных геометрических рисунков. Иконки Streamline vecto0r доступны для скачивания в трех вариантах: светлом, обычном и полужирном.

ITG Digital

ITG Digital — настоящая жемчужина бесплатных иллюстраций с удивительной коллекцией иллюстраций. Здесь вы можете искать элементы в соответствии с вашими потребностями, просматривать их или загружать по своему желанию. Откройте для себя свою иллюстрацию и настройте ее с желаемым дизайном. Вы можете стилизовать свою иллюстрацию, изменять элементы и использовать цвет, чтобы сделать ее своим брендом. После настройки вы можете скачать иллюстрацию в формате JPEG, PNG или SVG. У ITG Digital есть три разных плана: бесплатный, ежемесячный и годовой. Для бесплатных подписчиков эта иллюстрация содержит 100 элементов в формате JPEG.

OpenDoodles

OpenDoodles поставляется с обширной коллекцией бесплатных иллюстраций для любого личного или коммерческого использования. Эти нарисованные от руки иллюстрации можно скачать в любом формате, таком как SVG или PNG и даже GIF. С помощью генератора вы можете изменять цвета иллюстраций. Вы можете настроить цвета или использовать заранее созданные цвета самостоятельно. Более того, вы можете скачать всю коллекцию, а не какой-то конкретный предмет.

Изометрический

Изометрический веб-сайт — это бесплатная и полностью настраиваемая изометрическая иллюстрация. На этом бесплатном сайте есть почти все продукты для разных типов проектов. Эти продукты публикуются под лицензией MIT, поэтому используйте их без указания авторства. Продукты можно скачать как в формате SVG, так и в формате PNG, и все это бесплатно. Все иллюстрации для этого веб-сайта создал Сергей, который является дизайнером пользовательского интерфейса и иллюстратором.

Get Illustrations

Get Illustrations — это бесплатная библиотека иллюстраций со специализированными описаниями и информацией о типе файла, лицензии и программах редактирования, с которыми файл совместим. Вы найдете что-то новое каждый день, так как они постоянно обновляют контент. Сначала создайте учетную запись, а затем вы сможете загружать продукты. Если вы хотите настроить любую иллюстрацию, вы не можете сделать это в бесплатной версии. Все, что вы можете сделать, это попросить их сделать что-то, что подойдет для вашего проекта.

Woobro

Woobro — это бесплатная иллюстрация с уникальным векторным дизайном для коммерческих проектов. Все иллюстрации этого сайта специально созданы для помощи на каждом этапе вашего сайта. Эти иллюстрации можно загрузить в нескольких форматах, таких как форматы SVG, Sketch, AI и PNG. Кроме того, Woobro предоставила своим пользователям возможность использовать эти иллюстрации для личных и коммерческих проектов. Кроме того, вы также можете порадовать художника, упомянув его на этом сайте.

Fresh Folk

Fresh Folk — это сайт бесплатных иллюстраций с множеством интересных иллюстраций с уникальными идеями. Здесь вы можете использовать свое воображение, чтобы настроить своего персонажа, фоны и объекты. Также пользователи могут использовать эти иллюстрации для коммерческого и личного использования. Лени Кауфман, американо-японский иллюстратор, создала эту удивительную библиотеку иллюстраций людей и предметов. Вы можете изменить позу, одежду и тон кожи каждого персонажа с помощью смешивания и подбора. Кроме того, Fresh Folk поставляется с 43 объектами для создания широкого спектра сцен.

Control

Control — это бесплатный веб-сайт с иллюстрациями, который поставляется с огромной библиотекой потрясающих иллюстраций. Здесь вы можете выбирать между несколькими стилями и типами действий. Кроме того, он предоставил возможность настройки, поэтому вы можете настроить эти иллюстрации в соответствии с вашим воображением, как вы хотите. Кроме того, в Control есть набор из 108 отличных иллюстраций, которые помогут вам создать уникальные сцены для ваших целевых страниц. Кроме того, на этом иллюстративном сайте есть 18 персонажей с 3 сценами и 2 разными стилями. Итак, создайте сцену в соответствии с вашим стилем действий с помощью конструктора.

Картик Шринивас

Картик Шринивас — иллюстратор-дизайнер, создавший потрясающие высококачественные иллюстрации на разные темы. В основном он разрабатывал эти иллюстрации для проектов по дизайну веб-приложений, но все эти иллюстрации не бесплатны. Набор, который он собирает, включает 16 иллюстраций ручной работы для личных и коммерческих проектов. Кроме того, в этом удивительном наборе есть такие категории, как ошибка 404, отсутствие подключения к Интернету, отсутствие обслуживания, фатальная ошибка, страница не найдена, что-то пошло не так, в разработке и многие другие.

Иллюстрации

Иллюстрация представляет собой набор красочных иллюстраций в современном плоском стиле с открытым исходным кодом. Этот бесплатный комплект доступен для скачивания в формате PNG. В этот набор входит библиотека из 100 потрясающих иллюстраций, созданных за 100 дней конкурса иллюстраций. Более того, эти бесплатные иллюстрации можно бесплатно использовать в вашем следующем проекте, таком как целевые страницы, мобильное приложение или презентации. Кроме того, у иллюстраций есть премиум-план с более потрясающими иллюстрациями и возможностями. В основном этот веб-сайт предназначен для таких концепций, как онлайн-обучение, услуги доставки, оставайтесь дома, свяжитесь с нами и многое другое.

Avataaars

Avataaars — это бесплатный сайт с иллюстрациями аватаров, который охватывает почти все иллюстрации аватаров. Здесь на этом сайте есть десятки готовых аватаров с возможностью смешивания и сопоставления. Таким образом, вы можете легко смешивать и сочетать различные элементы для создания новых дизайнов. Меняйте одежду, прически, эмоции, аксессуары и цвета по своему выбору. В высшей степени талантливый Пабло Стэнли разработал этот удивительный сайт с иллюстрациями аватаров. Кроме того, Вы можете использовать Avataaars для личного и коммерческого использования.

Dedesign

Dedesign — известная компания, занимающаяся графическим дизайном, которая предлагает своим клиентам неограниченное количество индивидуальных дизайнов и покадровую графику. В последнее время Dedesign предлагает коллекцию бесплатных настраиваемых иллюстраций и шаблонов. Эти иллюстрации сопоставимы с иллюстрациями unDraw. Оба могут настроить основной цвет векторной графики перед загрузкой каждого изображения. Иллюстративные проекты Dedesign доступны как в формате SVG, так и в формате PNG. Здесь не нужно указывать сайт. Вы можете использовать эти дизайны совершенно бесплатно для всего, что вам нравится.

Scribbbles

Scribbbles — это сайт с бесплатными векторными иллюстрациями, на котором есть все основные элементы, которые вам понадобятся, чтобы оживить ваши проекты. Эта бесплатная иллюстрация содержит более 100 векторных иллюстраций scribbbles, систему настройки и категории для более удобного начала изучения. Кроме того, Scribbbles используют некоторые из самых известных компаний, таких как inVision, freelancer, JPMorgan, Verizon и LegalZoom. Более того, буквально в мгновение ока вы можете изменить размер, цвет иллюстраций.

Isometriclove

Isometriclove — это бесплатный сайт красивых изометрических объектов. На этом бесплатном сайте есть почти все объекты для разных типов проектов. Эти объекты предназначены для некоммерческих проектов с атрибутивной ссылкой. Вы можете создавать изометрические иллюстрации, используя 180 предопределенных объектов. Кроме того, вы можете использовать эти предварительно визуализированные 3D-объекты в любом из ваших дизайнов. Кроме того, вам нужно включить JavaScript для запуска этого приложения.

Разбить

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

Bottts

Bottts — это бесплатный иллюстрационный сайт в приложении Sketch с бесплатной библиотекой. Смешивайте и сочетайте роботов с библиотекой Sketch и создавайте собственные иллюстрации. Здесь на этом сайте есть десятки готовых иллюстраций роботов с возможностью смешивания и сопоставления. Таким образом, вы можете легко смешивать и сочетать различные элементы для создания новых дизайнов. Кроме того, вы можете комбинировать рамки, антенны, датчики, аксессуары и цвета по своему выбору. В высшей степени талантливый Пабло Стэнли разработал этот удивительный сайт с иллюстрациями аватаров. Кроме того, вы можете использовать Botts для личного и коммерческого использования.

Phonies

Phonies — это сайт бесплатных векторных иллюстраций со стильными иллюстрациями. На этом сайте есть набор из 8 простых черно-белых стильных векторных иллюстраций для целевых страниц, мобильных экранов и других редакционных целей. Эти иллюстрации можно загрузить в форматах AI, SVG, PNG и PDF. Так что используйте эти векторные иллюстрации в своем предстоящем проекте.

Abstrakt

Abstrakt — это бесплатный сайт с абстрактными иллюстрациями, на котором есть множество иллюстраций для вашего будущего проекта. Библиотека этого сайта содержит некоторые из последних иллюстраций, которые можно бесплатно скачать. Кроме того, вы можете приобрести премиум-пакет для более абстрактных иллюстраций. Вы можете легко использовать эти иллюстрации в своем следующем проекте без каких-либо колебаний.

Kapwing 404 Illustrations

404 Illustrations — это бесплатный веб-сайт с иллюстрациями для ваших будущих проектов 404. Этот удивительный сайт поставляется с модными, готовыми к использованию изображениями для ваших страниц 404. Здесь вы получите так много вариантов на выбор, и все они бесплатны. Команда Kapwing создала этот красивый иллюстративный сайт 404.

404 Illustrations

404 Illustrations — это бесплатный веб-сайт с иллюстрациями для ваших будущих проектов 404. Этот удивительный сайт поставляется с модными, готовыми к использованию изображениями для ваших страниц 404. Здесь вы получите так много вариантов на выбор, и все они бесплатны. Кроме того, иллюстрации этого сайта поставляются с бесплатными иллюстрациями для страниц. Чтобы создать другое путешествие по страницам с ошибкой 404 на вашем веб-сайте, примените эти иллюстрации, которые объясняют лучше, чем слова.

Black Illustrations

Black Illustrations — это сайт бесплатных иллюстраций, созданный чернокожими людьми. Вы можете использовать эти красивые иллюстрации чернокожих для своего следующего цифрового проекта. Будь то ваши веб-сайты, веб-приложения или мобильные приложения, этот сайт создал иллюстрации, которые можно использовать где угодно и где угодно. Black Illustrations приветствует вас в инклюзивном будущем. Многие крупные и известные веб-сайты, такие как web-flow, Airbnb и Google, используют черные иллюстрации.

Blush

Blush — это сайт бесплатных иллюстраций, который поможет вам рассказать свою историю с помощью иллюстраций. Этот красивый иллюстративный сайт содержит потрясающие иллюстрации с новыми коллекциями для всех. Теперь вы можете легко создавать и настраивать потрясающие иллюстрации из коллекций художников со всего мира. Выберите стиль из коллекции, настройте изображение в соответствии со своей историей и используйте его в своем дизайне. Кроме того, вы можете загрузить эти иллюстрации в формате PNG или SVG и использовать их в своем веб-приложении, презентации или любом другом проекте, который вы хотите воплотить в жизнь.

Pof-Pof

Pof-Pof — это бесплатный сайт иллюстраций, на котором представлен набор вдохновляющих иллюстраций для ваших проектов по самым популярным темам пользовательского интерфейса. Вы можете использовать этот набор иллюстраций для любого проекта, от веб-сайтов до приложений. Pof-Pof — это набор иллюстраций, который поставляется с красивым и красочным набором иллюстраций.

Комплект иллюстраций Pulse

Комплект иллюстраций Pulse — это сайт бесплатных иллюстраций для вашего будущего проекта. На этом сайте огромная коллекция иллюстраций с новыми возможностями. Иллюстрации Pulse поставляются со 103 иллюстрациями в комплекте, 20 готовыми к использованию сценами и 2 уникальными персонажами в 7 позициях каждый. Иллюстрации на этом сайте иллюстраций современные и минималистичные по стилю, и вы можете комбинировать и создавать новые сцены. Вы можете загрузить эти полностью векторные иллюстрации из источников AI, SVG, Figma, Sketch, PNG, и их легко редактировать.

УРА! ME

УРА! ME — это бесплатный набор иллюстраций с обширной коллекцией. В набор GEE ME входит необходимая плоская графика, 100 мультяшных персонажей и более 400 крутейших объектов. Таким образом, вы можете применять его как в проектах дизайна, так и в проектах разработки. Все это совершенно бесплатно, и теперь вы загружаете их и просто наслаждаетесь ими.

FreeIllustrations

FreeIllustrations — бесплатная иллюстрация фоновых изображений для вашего нового проекта. Вы можете скачать все это бесплатно для своих замечательных целевых страниц. Этот сайт поставляется с коллекцией векторных или иллюстрированных фоновых изображений высокого разрешения для современных веб-сайтов и целевых страниц. Кроме того, FreeIllustrations каждую неделю обновляется новыми иллюстрациями на различные темы. Кроме того, вы можете связаться с ними, чтобы предложить инновационные темы для иллюстраций фоновых изображений в соответствии с вашими требованиями.

Self Space

Self Space Illustrations — это бесплатный сайт иллюстраций для создания потрясающей презентации для вашего следующего проекта. С помощью этого сайта вы можете легко выразить себя. На этом сайте есть 20 красивых иллюстраций и 10 шаблонов для вашего следующего продукта. Иллюстрации полностью векторные, редактируемые, масштабируемые и имеют свежий цвет. Вы можете скачать эти иллюстрации в формате Sketch, SVG, Ai, PNG и Figma.

Ищете иконки SVG?

Try Line Icons

8 лучших веб-сайтов с бесплатным SVG — окончательный список

Масштабирование с мобильных устройств на экраны кинотеатров с помощью SVG

80% презентаций, которыми делятся с клиентами, просматриваются на мобильных устройствах. С другой стороны, живые презентации (будь то онлайн или лично) предполагают использование экрана большего размера с более высоким разрешением. Растровые графические изображения в форматах JPG, GIF и PNG имеют ограниченное количество пикселей и не очень хорошо масштабируются в широком диапазоне разрешений экрана. SVG — содержимое масштабируемой векторной графики представлено в виде математических формул для описания форм, текста и изображений. Это делает разрешение SVG независимым.

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

Вот несколько причин, по которым вам следует рассмотреть возможность использования SVG-контента в ваших презентациях:

1. SVG-контент может бесконечно масштабироваться без потери качества
2. Иконки и иллюстрации, созданные в формате SVG, можно легко анимировать
3. По сравнению с файлами растровых изображений файлы SVG значительно меньше
4. Их легко редактировать с помощью простого текстового редактора

Мы просмотрели множество веб-сайтов, предлагающих бесплатный SVG, и были приятно удивлены количеством и качеством доступного контента.

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

Критерии ранжирования SVG

1. Сколько файлов доступно на веб-сайте?
2. Является ли содержимое сайта бесплатным для скачивания? Требуют ли они лицензирования или лицензионных отчислений за совместное использование или публикацию контента?
3. Насколько интуитивно понятен пользовательский интерфейс для поиска, предварительного просмотра и загрузки?

Создавайте привлекательные презентации с помощью этих бесплатных SVG-файлов!

1. unDraw

unDraw — очень впечатляющий веб-сайт с бесплатными иллюстрациями, так как вы получаете файлы SVG без авторских прав и можете редактировать, настраивать и объединять несколько иллюстраций для индивидуального дизайна в соответствии с вашими требованиями

2. Pixabay

Pixabay предлагает коллекцию SVG высочайшего качества (некоторые из них не бесплатны, поэтому убедитесь, что вы выбрали бесплатные).

3. Open Doodles

Open Doodles — это коллекция нарисованных вручную векторных иллюстраций. Вы можете копировать, редактировать и настраивать эти изображения для личного или коммерческого использования.

4. Vectorportal

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

5. Флатикон

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

6. ICONMNSTR

ICONMNSTR предлагает простые и настраиваемые бесплатные SVG

7. Dry Icons

Dry Icons предлагает большую коллекцию значков на различные темы

8. Graphic Burger

9000 2 Graphic Burger предлагает большую коллекцию бесплатных загружаемых иконок

Ранее мы обследовали сайты, которые обеспечивают бесплатное скачивание и распространение фотографий, видео и иллюстраций.