20 Nyttige SVG-værktøjer til bedre grafik
SVG vinder popularitet i webdesign i disse dage, og du kan bruge værktøjer som Illustrator eller Inkscape til at oprette SVG-grafik. Men når det kommer til webdesign, bør vi altid optimere til lettere resultater.
Her den 20 værktøjer, du kan bruge til hurtigt og effektivt at arbejde med SVG. Vi har for det meste onlineværktøjer, der kan hjælpe med optimering, konvertering, mønstre og meget mere.
Interaktivt SVG-koordinatsystem
Når du arbejder med SVG, kan du ikke forlade sin koordinat. Dette er et fantastisk interaktivt værktøj af Sara Souiden, som hjælper dig lær hvordan SVG koordinater virker. Bruger viewBox og preserveAspectRatio På SVG, styret af orange og lilla linjer og en praktisk linjal, kan du spille, mens du lærer, hvordan SVG-koordinaterne fungerer.
B64
B64 er et simpelt værktøj til optimer billeder og drej dem til base64 format. Du kan droppe dine SVG-billeder (andre formater som f.eks. JPG og PNG-arbejde), og tag derefter CSS'en med base64-baggrundsbillede som resultat.
SVGO
SVG, der eksporteres, kan indeholde unødvendige oplysninger som kan fjernes uden at påvirke renderingsresultatet. Hvis du vil Fjern editorens metadata, kommentarer eller skjulte elementer, Du kan bruge SVGO.
Du kan tilslutte SVGO via npm, $ [sudo] npm installer -g svgo eller brug GUI-versionen, der tilbyder træk og slip for at få adgang til din SVG-optimering.
SVG OMG
SVG OMG ændrer kommandolinjen til SVGO (det forrige værktøj) til en GUI-version det mere intuitivt og nemt at bruge. Lige skift knapperne for at aktivere eller deaktivere hver funktion. I sidste ende kan du få fat i resultatet som billedfiler og kode også.
SVG nu
Når du arbejder på Illustrator, indeholder den eksporterede SVG nogle oplysninger, der ikke er nødvendige. Med dette værktøj vil du få den optimerede version af din eksporterede SVG lige fra dit Illustrator-arbejdsområde. Dette værktøj tilføjer et panel med nogle muligheder for at optimere SVG. Du kan nu få SVG fra Creative Cloud Add-ons-siden.
SVG til PNG konverter
Vil eksporter SVG-filer til PNG-formularen? Uden at åbne applikationer som Illustrator for at gøre det? Brug dette SVG til PNG Converter værktøj til at få billedudgange i PNG format og også PNG Base64 data URI, hvis du har brug for det.
SVG Circus
Hvis du tror, at loader animationer er cool, kan du nu nemt oprette det ved at bruge SVG med SVG Circus. Værktøjerne gør det muligt for dig lav din egen loader, spinner eller noget lignende ved hjælp af looped animation. Indstil 'Skuespiller', position, størrelse, farve og andre fra panelet, og eksporter derefter for at få resultaterne.
SVG Sprite
SVG Sprite er et Node.js modul, som optimerer en masse SVG-filer, og bager dem til SVG sprite-typer herunder traditionelle CSS sprites til baggrunds- og / eller forgrundsbilder, SVG-stakke og meget mere.
quasi
Med kvasi kan du generere quasicrystal billeder som det du ser nedenfor. Denne generator er eksperimentel, men resultaterne er helt sikkert cool. Du kan spille rundt ved at ændre indstillingsværdien, og download derefter resultaterne med 'Gem SVG' knappen.
Almindeligt mønster
Oprettelse af mønstre med SVG har aldrig været nemmere eller sjovere. Upload dit billede, skala ned eller ændre afstanden, drej og recolor indtil du får et smukt mønster. Du kan forhåndsvise resultatet før du downloader det.
Trianglify Generator
Opret smukke SVG geometriske mønstre med Trianglify Generator. Du kan indstille farve tilfældighed / variant, granularitetsstørrelse og vælge en farvepalet at arbejde med. Dette værktøj er en GUI-version af Trianglify.
SVG Gradient
Du ved, at du kan lave gradienter med CSS, men vidste du, at du kan gøre det samme med SVG? Den nemmeste måde at generere gradient på SVG er ved at bruge dette værktøj. Bare indtast start og stop farve, så får du koden for det genererede resultat. En tilbagesendelse på CSS er også inkluderet.
Eksporter PSD til SVG
Hvis du bruger Photoshop som billedredaktør til dit arbejde, kan du nogle gange måske konverter dit design på Photoshop-arbejdsområdet til SVG, hvilket er et ikke understøttet format i Photoshop. Download scriptet til dette værktøj, og kopier derefter til Adobe Photoshop / forudindstillinger / scripts folder.
Omdøb et vektorlagnavn med SVG-udvidelsen (fx layer1 bliver layer1.svg), og du kan nu køre scriptet fra Fil> Scripts> PS til SVG.
SVG-filtre
Ved du, at med SVG kan du tilføje effekter som med farvetone, mætning, sløring, lineær farveoverlejring og mange andre til billeder? Her er et værktøj, som visualiserer disse effekter og giver dig et uddrag at gøre det nemt at integrere effekten ind i dit projekt.
SVG Morpheous
SVG Morpheous er et JavaScript-bibliotek, der giver dig mulighed for morph et SVG ikon fra en form til en anden. Du kan indstille lette effekten, varigheden af overgangs animationer og også rotationsretningen.
Clip path generator
SVG giver dig mulighed for at klikke på billedklipet med Form. Dette er ret nemt, hvis formen er i form af en firkant eller en cirkel. Men hvad hvis formen er en med mange punkter eller er en polygonal form? Det er her du har brug for dette Clip Path Generator værktøj.
Chartist.js
Chartist.js er et bibliotek til oprette meget tilpassede lydhøre diagrammer. Det bruger SVG til at vise diagrammerne, som også kan animeres ved hjælp af SMIL. Med dette bibliotek kan du oprette linjediagram, cirkeldiagram, stregdiagram og andre typer diagrammer, og endda tilføje animation til dem.
SVG stroke dash generator
Dette er et simpelt værktøj til generere stiplede linjer udnytte SVG slagtilfælde-dasharray. Vælg først en bindestregstype fra listen, og tilpass derefter den i bredde, højde, rotation eller farve. Bagefter kan du hente HTML-koden og CSS for at anvende denne linie i dit projekt.
Metode Tegn: En simpel SVG Editor
Metode Draw er en webbaseret SVG editor med en intuitiv grænseflade, der kommer med værktøjer på begge sider af lærredet. Du kan tegne linjer, former, indtastningstekst eller bruge indbyggede former, og rediger derefter de trukket objekters egenskaber. Eksporter billedet i SVG-format (kommer også i SVG base64-format) eller gem direkte i PNG.
Eksporter Flash til animeret SVG
Selv om det ikke er meget populært længere, er der en chance for, at nogle af jer har svært ved at slippe af med Flash. Hvis ja, kan du vend din flash animation til SVG for at holde det arbejde kompatibelt med nyere teknologier. Dette værktøj udgør en udvidelse til Flash-applikationen, og kan arbejde på CS5, CS6 og CC.
Du kan eksportere til SVG, når det kommer til figurer, Bitmaps-symboler, Classic Motion Tweens, Shape Tweens (for andre er der sandsynlig succes).
