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



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

Просмотр svg комплектов

Задача: Есть файл svg с набором из нескольких элементов вида, как описано здесь. Нужно увидеть сами картинки в браузере.

Для этого вставим svg на страницу с помощью тега <embed>. И далее, разобрав его на элементы <symbol>, выведем как отдельное svg-изображение, попутно подписав id каждого. Теперь можно увидеть свой svg файл на странице.

<!DOCTYPE html>
<html>
<head>
    <title>Иконки</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
    body{
        font-size: 90%;
    }
    embed{
        display: none;
    }
    .iconsBox{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 20px;
        border-bottom: 3px solid #ccc;
        padding-bottom: 20px;
    }
    .iconsBox > div{
        text-align: center;
    }
    .iconsBox > div p{
        margin-bottom: 10px;
    }
    .iconsBox svg{
        width: 32px;
        height: 32px;
    }
</style>

<script>
showSetSvg('icons.svg');
//icons.svg - имя и путь к разбираемому svg-файлу

function showSetSvg(namefile){
    let symbBox = document.createElement('embed');
    symbBox.setAttribute('type', 'image/svg+xml');
    symbBox.setAttribute('src', namefile);
    let body = document.body;
    body.appendChild(symbBox);

    let iconsBox = document.createElement('div');
    iconsBox.classList.add('iconsBox');
    body.appendChild(iconsBox);

    symbBox.onload = function(){
        let svgInner = symbBox.getSVGDocument();
        let symb = svgInner.querySelectorAll('symbol');

        for(let i = 0; i < symb.length; i++){
            let svgBox = document.createElement('div');
            svgBox.innerHTML = '<p>' + symb[i].id + '</p><svg class="svgicons"><use xlink:href="' + symbBox.src + '#' + symb[i].id + '"></use></svg>';
            iconsBox.appendChild(svgBox);
        }
    }

}

</script>

</body>
</html>
Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.