Jak pomocí CSS upravovat vektorové SVG obrázky?

SVG (Scalable Vector Graphics) je formát vektorových obrázků, který umožňuje jejich snadné úpravy pomocí CSS. To znamená, že můžeme SVG měnit dynamicky, nastavovat jim barvy, přidávat interaktivní efekty a animace, a to vše bez nutnosti měnit samotný SVG kód.

Základní úpravy SVG pomocí CSS

Pro styling SVG máme několik možností. Můžeme přímo manipulovat atributy fill (výplň), stroke (obrys) nebo použít efekty jako hover a animace.

Změna barvy SVG

Pokud chceme změnit barvu výplně SVG, použijeme CSS vlastnost fill:

    .icon-fill {
        fill: red;
    }
    

Ukázka:

Změna barvy obrysu SVG

Pro změnu barvy obrysu místo výplně můžeme využít vlastnost stroke:

    .icon-stroke {
        stroke: blue;
        stroke-width: 4px;
        fill: none;
    }
    

Ukázka:

Interaktivní efekty: Hover

Přidání efektu při najetí myší lze snadno provést pomocí :hover:

    .icon-hover:hover {
        fill: green;
    }
    

Ukázka:

Animace čáry v SVG

Pomocí CSS můžeme vytvořit animaci pro čáry v SVG, například efekt postupného kreslení:

    @keyframes dash {
        from {
            stroke-dasharray: 0, 200;
        }
        to {
            stroke-dasharray: 200, 0;
        }
    }

    .icon-animated {
        stroke: black;
        stroke-width: 3px;
        fill: none;
        stroke-dasharray: 200;
        animation: dash 2s linear infinite;
    }
    

Ukázka:

Efekt zvětšení SVG

Při najetí myší lze SVG zvětšit pomocí CSS transformací:

    .icon-scale {
        transition: transform 0.3s ease-in-out;
    }

    .icon-scale:hover {
        transform: scale(1.2);
    }
    

Ukázka:

Rotace SVG

Při najetí myší lze také SVG otočit:

    .icon-rotate {
        transition: transform 0.5s ease-in-out;
    }

    .icon-rotate:hover {
        transform: rotate(360deg);
    }
    

Ukázka:

Závěr

Použití CSS pro styling SVG je velmi flexibilní a umožňuje přizpůsobení vzhledu obrázků přímo z kódu webové stránky. Díky vlastnostem fill, stroke, transformacím a animacím lze snadno vytvářet interaktivní prvky bez nutnosti úprav samotného SVG souboru.

Pokud chcete vytvářet moderní a vizuálně atraktivní webové stránky, ovládání CSS pro SVG je skvělou dovedností, která vám umožní zlepšit uživatelskou zkušenost a interaktivitu na vašem webu.