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

Obsah
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