SVG-katselin ja Editori
Esikatsele, muokkaa ja optimoi SVG-tiedostoja verkossa. Reaaliaikainen esikatselu, koodin muokkaus ja optimointityökalut.
Mikä on SVG-muoto?
SVG (Scalable Vector Graphics) on XML-pohjainen vektorikuvaformaatti, joka mahdollistaa äärettömän skaalauksen ilman laadun heikkenemistä. Sitä käytetään laajasti logoihin, kuvakkeisiin ja web-grafiikkaan.
Mikä on ero SVG:n ja PNG:n välillä?
SVG on vektoriformaatti, joka käyttää matemaattisia kaavoja grafiikan kuvaamiseen ja voidaan skaalata äärettömästi ilman laadun heikkenemistä. PNG on rasteriformaatti, joka koostuu pikseleistä ja sumenee suurennettaessa. SVG on ihanteellinen logoihin, kuvakkeisiin ja kaavioihin, kun taas PNG sopii paremmin valokuviin.
Mitä tiedostomuotoja voin katsoa?
Tämä työkalu näyttää SVG-tiedostoja. Voit liittää SVG-koodia suoraan tai ladata .svg-tiedoston laitteeltasi.
Voinko muokata SVG-koodia suoraan?
Kyllä, voit muokata SVG-lähdekoodia editoripaneelissa ja nähdä muutokset esikatselupaneelissa reaaliajassa.
Miten reaaliaikainen esikatselu toimii?
Esikatselupaneeli päivittyy automaattisesti, kun kirjoitat koodieditoriin, ja näyttää tarkalleen miten SVG renderöityy selaimissa.
Miten optimoin SVG-tiedostoni?
Napsauta Optimoi poistaaksesi tarpeettomat välilyönnit, kommentit, metatiedot ja ylimääräiset attribuutit, pienentäen tiedostokokoa.
Voinko muuttaa SVG-värejä ja tyylejä?
Kyllä, voit muokata täyttöväriä, viivaväriä, läpinäkyvyyttä ja muita tyyliattribuutteja suoraan SVG-koodissa.
Tukeeko SVG animaatiota?
Kyllä, SVG tukee animaatioita SMIL (Synchronized Multimedia Integration Language) ja CSS-animaatioiden kautta. Voit luoda efektejä kuten liike, värimuutokset ja muotomuunnokset suoraan SVG:ssä.
Mitkä selaimet tuetaan?
Tämä työkalu toimii kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge.
Miten voin validoida SVG-syntaksin?
Työkalu korostaa automaattisesti syntaksivirheet SVG-koodissasi, auttaen sinua tunnistamaan ja korjaamaan ongelmat välittömästi.
Voinko muuttaa SVG:n kokoa ilman laadun heikkenemistä?
Kyllä, SVG on vektoriformaatti, joka voidaan skaalata mihin tahansa kokoon ilman laadun heikkenemistä tai pikselöitymistä.
Lähetetäänkö SVG-tietoni palvelimelle?
Ei, kaikki käsittely tapahtuu paikallisesti selaimessasi. SVG-sisältösi ei koskaan poistu laitteeltasi.
Näin käytät työkalua SVG-katselin ja Editori
SVG Viewer & Editor näyttää SVG:n heti, kun liität koodin tai pudotat tiedoston, ja antaa muokata koodia reaaliaikaisen esikatselun avulla. Kaikki tapahtuu paikallisesti selaimessasi.
- Liitä SVG-koodisi “Paste SVG code here or drag & drop a file...” -vihjeen omaavaan editoriin tai raahaa .svg-tiedosto sivulle.
- Grafiikka renderöityy heti koodin vieressä olevaan reaaliaikaiseen esikatseluun.
- Muokkaa suoraan koodissa attribuutteja kuten viewBox, width, height, fill tai polkudata — esikatselu päivittyy kirjoittaessasi.
- Korjaa yleiset ongelmat heti, esimerkiksi puuttuva xmlns-attribuutti tai kuvaan rajan vetävä viewBox.
- Kopioi lopullinen koodi, kun esikatselu näyttää oikealta.
Jos esikatselu pysyy tyhjänä, tarkista että koodi alkaa <svg-merkeillä ja sisältää xmlns-nimiavaruuden — puuttuva xmlns on yleisin syy.
Aiheeseen liittyvät työkalut
- SVG-optimoija Optimoi ja pakkaa SVG-tiedostot välittömästi selaimessasi. Poista metatiedot, kommentit ja editorin roskat, pienennä koko jopa 60%.
- SVG PNG -muunnin Muunna SVG PNG-, JPEG- tai WebP-muotoon välittömästi selaimessasi. Mukauta skaalaa, kokoa ja taustaväriä. Ilmainen, yksityinen, ei latausta.
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- HTTP-pyyntö Testaaja Testaa REST API:ja suoraan selaimessasi. Lähetä GET-, POST-, PUT-, DELETE-pyyntöjä mukautetuilla otsikoilla, rungolla ja parametreilla. Näe vastauksen tila, otsikot ja JSON-runko heti.
- .htaccess-generaattori Luo Apache .htaccess-sääntöjä uudelleenohjauksille, uudelleenkirjoituksille, turvallisuusotsikoille, välimuistille ja muulle.
- Robots.txt Generaattori Ilmainen online robots.txt generaattori. Luo ja mukauta robots.txt-tiedostoja hallitaksesi hakukoneiden indeksointia, hallitaksesi indeksoijien pääsyä ja optimoidaksesi sivustosi SEO.
- Sivustokartta Generaattori Ilmainen online XML sivustokartta generaattori. Lisää URL-osoitteita, aseta prioriteetit ja luo SEO-sivustokarttoja heti.