SVG esimerkki
Kokeile itse esimerkkiä
Seuraavassa esimerkissä SVG-koodi upotetaan suoraan HTML-koodiin.
Firefox, Internet Explorer 9, Google Chrome, Opera ja Safari tukevat tätä toimintaa.
SVG esimerkki
SVG perusmuodot
- Kiekko
- Ruutukko
- Avoimuuden suorakulmio
- Avoimuus 2:n suorakulmio
- Kulmikkainen suorakulmio
- Ympyrä
- Kolme ympyrää, jotka toistuvasti päällekkäin
- Kaksi ympyrää
- Viiva
- Kolmiruutuisen monikulmion monikulmio
- Nelikulmioiden monikulmio
- Tähti
- Toinen tähti
- Kaari
- Toinen kaari
- Polku
- Kaksinkertainen Bézsser-käyrä
- Kirjoita tekstikappale
- Kiertävä teksti
- Monirivinen teksti
- Teksti linkkinä
- Määritellään viivan, tekstin tai reunaan liittyvän reunan väri (stroke)
- Määritellään viivan, tekstin tai reunaan liittyvän reunan leveys (stroke-width)
- Määritellään avoimen polun eri tyyppiset päät (stroke-linecap)
- Määritellään viivamerkki (stroke-dasharray)
SVG suodattimet
- feGaussianBlur - Pehmennysvaikutus
- feOffset - Siirretään suorakulmio ja yhdistetään alkuperäinen kuva siirtymäkuvan yläpuolelle
- feOffset - Pehmennetään siirtymä kuvaa
- feOffset - Tehdään varjosta musta
- feOffset - Käsittelee varjoja tietyllä värillä
- feBlend suodin
- Suodin 1
- Suodin 2
- Suodin 3
- Suodin 4
- Suodin 5
- Suodin 6
SVG väriäntasaus
- Kulma, jossa on horisontaalinen väriäntasaus keltaisesta punaiseen
- Kulma, jossa on vertikaalinen väriäntasaus keltaisesta punaiseen
- Kulma, jossa on horisontaalinen väriäntasaus keltaisesta punaiseen ja teksti
- Ympyrä, jolla on radialinen pehmeä väriäntasaus valkoisesta siniseen
- Ympyrä, jolla on radialinen pehmeä väriäntasaus valkoisesta siniseen
