20 Nyttige SVG-verktøy for bedre grafikk
SVG blir stadig mer populært i webdesign i disse dager, og du kan bruke verktøy som Illustrator eller Inkscape for å lage SVG-grafikk. Men når det gjelder webdesign, bør vi alltid optimalisere for lettere resultater.
Her 20 verktøy som du kan bruke til å jobbe med SVG raskt og effektivt. Vi har for det meste elektroniske verktøy, som kan hjelpe til med optimalisering, konvertering, lage mønstre og mer.
Interaktivt SVG-koordinatsystem
Når du jobber med SVG, kan du ikke forlate sin koordinat. Dette er et flott interaktivt verktøy av Sara Souiden, for å hjelpe deg lær hvordan SVG koordinater fungerer. Bruker ViewBox og preserveAspectRatio På SVG, styrt av oransje og lilla linjer og en praktisk linjal, kan du spille mens du lærer hvordan SVG-koordinatene fungerer.
B64
B64 er et enkelt verktøy til optimaliser bildene og snu dem til base64-formatet. Du kan slippe SVG-bildene dine (andre formater som JPG og PNG-arbeid også), og ta tak i CSS med base64 bakgrunnsbilde som resultat.
SVGO
SVG som eksporteres, kan inneholde unødvendig informasjon som kan fjernes uten å påvirke gjengivelsesresultatet. Hvis du vil fjern redaktør-metadata, kommentarer eller skjulte elementer, Du kan bruke SVGO.
Du kan legge SVGO via npm, $ [sudo] npm installer -g svgo eller bruk GUI-versjonen som tilbyr dra og slipp for å progresere din SVG-optimalisering.
SVG OMG
SVG OMG gjør kommandolinjen til SVGO (det forrige verktøyet) i a GUI-versjon det mer intuitivt og enkelt å bruke. Bare vri på knappene for å aktivere eller deaktivere hver funksjon. Til slutt kan du hente resultatet som bildefiler og kode også.
SVG nå
Når du arbeider på Illustrator, inneholder den eksporterte SVG noen informasjon som ikke er nødvendig. Med dette verktøyet vil du få den optimaliserte versjonen av den eksporterte SVG-en rett fra Illustrator-arbeidsområdet. Dette verktøyet legger til et panel med noen alternativer for å optimalisere SVG. Du kan få SVG nå fra siden Creative Cloud Add-ons.
SVG til PNG-omformer
Vil eksporter SVG-filer til PNG-skjema? Uten å åpne programmer som Illustrator for å gjøre det? Bruk dette SVG til PNG Converter-verktøyet for å få bildeutdata i PNG-format og også PNG Base64-data URI hvis du trenger det.
SVG sirkus
Hvis du tror at loader animasjoner er kule, nå kan du lage det enkelt ved å bruke SVG med SVG sirkus. Verktøyene gjør det mulig å lag din egen laster, spinner eller noe lignende ved hjelp av looped animasjon. Sett "Skuespiller", posisjon, størrelse, farge og andre fra panelet, og deretter eksporter for å få resultatene.
SVG Sprite
SVG Sprite er en Node.js-modul, som optimaliserer en gruppe SVG-filer, og baker dem inn i SVG sprite-typer inkludert tradisjonelle CSS sprites for bakgrunns- og / eller forgrunnsbilder, SVG-stabler og mer.
Kvasi
Med kvasi kan du generere quasicrystal bilder som det du ser nedenfor. Denne generatoren er eksperimentell, men resultatene er definitivt kule. Du kan spille rundt ved å endre alternativverdien, og last ned resultatene med 'Save SVG' knappen.
Vanlig mønster
Opprette mønstre med SVG har aldri vært enklere eller morsommere. Last opp bildet ditt, skala ned eller endre avstanden, roter og recolor til du får et vakkert mønster. Du kan forhåndsvise resultatet før du laster ned det.
Trianglify Generator
Lag vakre SVG geometriske mønstre med Trianglify Generator. Du kan angi fargevalget / varianten, kornstørrelsen og velge en fargepalett som skal brukes til. Dette verktøyet er en GUI-versjon av Trianglify.
SVG Gradient
Du vet at du kan gjøre gradienter med CSS, men visste du at du kan gjøre det samme med SVG? Den enkleste måten å generere gradient på SVG er ved å bruke dette verktøyet. Bare skriv inn start og stopp farge, så får du koden for det genererte resultatet. En tilbakebetaling på CSS er også inkludert.
Eksporter PSD til SVG
Hvis du bruker Photoshop som bilderedigerer for arbeidet ditt, kan det hende du trenger det Konverter designen din på Photoshop-arbeidsområdet til SVG, som er et ikke-støttet format i Photoshop. Last ned skriptet til dette verktøyet, og kopier deretter til Adobe Photoshop / forhåndsinnstillinger / skript mappe.
Gi nytt navn til et vektorlagnavn med SVG-utvidelsen (for eksempel lag 1 blir layer1.svg), og du kan nå kjøre skriptet fra Fil> Skript> PS til SVG.
SVG-filtre
Vet du at med SVG kan du legge til effekter som med fargetone, metning, uskarphet, lineær fargeoverlegg og mange andre til bilder? Her er et verktøy som visualiserer disse effektene, og gir deg en utdrag for å gjøre det enkelt legge inn effekten inn i prosjektet ditt.
SVG Morpheous
SVG Morpheous er et JavaScript-bibliotek som lar deg form et SVG-ikon fra en form til en annen. Du kan angi lempeffekten, varigheten av overgangsanimasjoner, og også rotasjonsretningen.
Clip path generator
SVG lar deg klikke på bildeklippet med Form. Dette er ganske enkelt hvis formen er i form av en firkant eller en sirkel. Men hva hvis formen er en med mange poeng eller en polygonal form? Det er her du trenger dette Clip Path Generator verktøyet.
Chartist.js
Chartist.js er et bibliotek til skape svært tilpassbare responsive diagrammer. Den bruker SVG til å vise diagrammer, som også kan animeres ved hjelp av SMIL. Med dette biblioteket kan du lage linjediagram, kakediagram, linjediagram og andre typer diagrammer, og til og med legge til animasjon for dem.
SVG slagstrekk generator
Dette er et enkelt verktøy til generere stiplede linjer utnytte SVG slag-dasharray. Velg først en dashtype fra listen, og tilpass deretter den når det gjelder bredde, høyde, rotasjon eller farge. Etterpå kan du hente HTML-koden og CSS for å bruke denne dash-linjen i prosjektet.
Metode Tegn: En Enkel SVG Editor
Metode Draw er en web-basert SVG editor, med en intuitivt grensesnitt som kommer med verktøy på begge sider av lerretet. Du kan tegne linjer, figurer, skriv inn tekst eller bruke innebygde figurer, og deretter redigere egenskapene til de tegneobjektene. Eksporter bildet i SVG-format (kommer også i SVG base64-format) eller lagre direkte i PNG.
Eksporter Flash til animert SVG
Selv om det ikke er veldig populært lenger, er det en sjanse for at noen av dere har det vanskelig å gi slipp på Flash. I så fall kan du slå flash animasjonen til SVG for å holde den i stand kompatibel med nyere teknologier. Dette verktøyet utgjør en utvidelse til Flash-applikasjonen, og kan fungere på CS5, CS6 og CC.
Du kan eksportere til SVG når det gjelder figurer, Bitmaps-symboler, Classic Motion Tweens, Shape Tweens (for andre er det mulig å lykkes).
