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

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.

OBJEDNAT SEO OPTIMALIZACI

Líbí se vám článek? Dejte mu 5 hvězd!

Aktuální hodnocení článku 5.0/5 (24 hlasujících)

avatar autora Tomáš Rohlena
Tomáš Rohlena je zkušený specialista na SEO, vývoj webových stránek, portálů a digitálních aplikací, který propojuje technologické know-how s hlubokým porozuměním online marketingu a provozu webových projektů. Díky mnohaletým zkušenostem dokáže nejen optimalizovat weby pro maximální viditelnost ve vyhledávačích, ale také navrhovat efektivní strategie pro zlepšení konverzí a dlouhodobé udržitelnosti online projektů.
ikona sociální sítě ikona sociální sítě

Komentáře

Přidejte první komentář ke článku Jak pomocí CSS upravovat vektorové SVG obrázky?.

Přidat komentář

Kde je článek zařazen?

Kategorie: HTML, CSS
Štítky: obrázky, obrázek, svg