Иконки SVG

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

Преимущества SVG-иконок

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

ИспользованиеSVG-иконок вWeb Apps

Как было сказано, вWeb-браузере, есть несколько способов отобразитьSVG,ВWeb-браузереSVG, как частьHTML-страницы. Однако, при отображенииSVG-иконки, использованиеHTML-элемента img для отображения иконки является наиболее простым способом, HTML-элемент img может легко увеличивать и уменьшать размерSVG-иконки.

Вот пример элемента, который показываетSVG-иконку:

<img src="svg-icon.svg">

Чтобы увеличить или уменьшить размерSVG-иконки, просто используйте стилевые атрибутыCSS width илиheight. Вот пример элемента img с добавленным стилевым атрибутом CSS Height:

<img src="svg-icon.svg" style="height:32px">

Чтобы сохранить пропорцииSVG-иконки при увеличении или уменьшении, следует устанавливать только один из значенийwidth илиheight, а не оба сразу. Когда устанавливается только одно значение ширины, браузер соответствующим образом масштабируетSVG-иконку по другой оси, чтобыSVG-иконка保持了 свои пропорции.

Создание своихSVG-иконок

Иногда вам может потребоваться создать自己的SVG-иконку. SVG-иконка - это простоSVG-изображение, содержащееся в своем собственномSVG-файле. Вот一个非常 простая круговая иконка, состоящая из элемента SVG circle:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

Вот как выглядитSVG-иконка, отображаемая вместе с элементом img:

Но когда вы используете элемент img для отображения этогоSVG-иконки и изменяете размерimg, SVG-иконка не увеличивается или не уменьшается. Напротив,或多或少 будет виднаSVG-канва. Вот пример, где атрибут CSS Height установлен в 32:

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

Причина возникновения этой проблемы в том, чтоSVG-файл изображения缺少 некоторые данные. Вы должны установить значение для атрибута viewBox SVG. Атрибут viewBox SVG определяет, сколькоSVG-канвы должно быть отрисовано (в направлениях X и Y).

В нашем примере мы хотим показать только частьSVG-канвы с иконкой в виде круга. Эта область начинается от точки 0,0 и заканчивается точкой 128,128 (радиус круга 64, центр 64,64). Используя атрибут Viewbox SVG, мы можем определить, какая частьSVG-канвы будет отрисовываться. Вот как выглядитSVG-иконка с установленным значением Viewbox:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
　　　　<circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

Это отображаемый SVG-иконка, высота которой составляет 32, 48 и 64 пикселя: