Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Внедряем svg изображения на страницу

Задача: организовать вставку множества иконок в проект, с возможностью замены цвета через css.

Для такой задачи отлично подходят svg изображения.

В случае, когда изображений много, наиболее предпочтительный способ вставки svg на страницу: вставлять как один из элементов общего файла, в котором описываются все иконки:

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons.svg#edit"></use></svg>

img/icons.svg - путь к файлу;
edit - название элемента-символа.

Вот так выглядит сам файл icons.svg:

<svg>
    <symbol id="goup" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 16c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16zM29 16c0 7.18-5.82 13-13 13s-13-5.82-13-13 5.82-13 13-13 13 5.82 13 13z"></path>
        <path d="M22.086 20.914l2.829-2.829-8.914-8.914-8.914 8.914 2.828 2.828 6.086-6.086z"></path>
 </symbol>
    <symbol id="down" viewBox="0 0 16 28" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 11c0 0.266-0.109 0.516-0.297 0.703l-7 7c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-7-7c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h14c0.547 0 1 0.453 1 1z"></path>
    </symbol>
    ...
</svg>
Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.