20 nützliche SVG-Tools für bessere Grafiken
SVG erfreut sich heutzutage großer Beliebtheit im Webdesign und Sie können Tools wie Illustrator oder Inkscape verwenden, um SVG-Grafiken zu erstellen. Aber wenn es um Webdesign geht, sollten wir immer für leichtere Ergebnisse optimieren.
Hier die 20 Tools, mit denen Sie schnell und effizient mit SVG arbeiten können. Wir haben meistens Online-Tools, die bei der Optimierung, Konvertierung, Erstellung von Mustern und mehr helfen können.
Interaktives SVG-Koordinatensystem
Wenn Sie mit SVG arbeiten, können Sie die Koordinate nicht verlassen. Dies ist ein großartiges interaktives Tool von Sara Souiden, das Ihnen helfen kann erfahren Sie, wie die SVG koordiniert. Verwendung der viewBox und erhalteAspectRatio Bei SVG, geführt von orangefarbenen und violetten Linien und einem praktischen Lineal, können Sie spielen, während Sie lernen, wie SVG-Koordinaten funktionieren.
b64
b64 ist ein einfaches Werkzeug um Bilder optimieren und dann in das base64-Format umwandeln. Sie können Ihre SVG-Bilder ablegen (andere Formate wie JPG und PNG funktionieren ebenfalls) und dann das CSS mit dem base64-Hintergrundbild als Ergebnis verwenden.
SVGO
Exportierte SVG-Dateien können enthalten unnötige Informationen die entfernt werden kann, ohne das Rendering-Ergebnis zu beeinflussen. Wenn du möchtest Entfernen Sie Editor-Metadaten, Kommentare oder ausgeblendete Elemente, Sie können SVGO verwenden.
Sie können SVGO über npm aufrufen, $ [sudo] npm install -g svgo oder verwenden Sie die GUI-Version, die Drag & Drop für die Verarbeitung Ihrer SVG-Optimierung bietet.
SVG OMG
SVG OMG schaltet die Befehlszeile von SVGO (das vorherige Werkzeug) in eine GUI-Version das intuitiver und einfach zu bedienen. Gerade die Knöpfe umschalten um jede Funktion zu aktivieren oder zu deaktivieren. Am Ende können Sie das Ergebnis auch als Bilddateien und Code erfassen.
SVG jetzt
Wenn Sie mit Illustrator arbeiten, enthält die exportierte SVG-Datei einige Informationen, die nicht erforderlich sind. Mit diesem Tool wirst du Holen Sie sich die optimierte Version Ihrer exportierten SVG direkt aus Ihrem Illustrator-Arbeitsbereich. Dieses Tool fügt ein Panel mit einigen Optionen zum Optimieren von SVG hinzu. Sie können SVG Now jetzt von der Creative Cloud-Add-On-Seite herunterladen.
SVG in PNG Konverter
Möchte Exportieren Sie SVG-Dateien in das PNG-Format? Ohne Anwendungen wie Illustrator dazu zu öffnen? Verwenden Sie dieses SVG-zu-PNG-Konverter-Tool, um Bildausgaben im PNG-Format und bei Bedarf auch den PNG Base64-Daten-URI abzurufen.
SVG-Zirkus
Wenn Sie denken, dass Loader-Animationen cool sind, können Sie sie jetzt leicht erstellen, indem Sie SVG mit verwenden SVG-Zirkus. Die Tools ermöglichen es Ihnen Erstellen Sie Ihren eigenen Loader, Spinner oder ähnliches mithilfe von Loop-Animationen. Stellen Sie den 'Darsteller', die Position, die Größe, die Farbe usw. in der Kontrollleiste ein, und exportieren Sie dann, um die Ergebnisse zu erhalten.
SVG Sprite
SVG Sprite ist ein Node.js-Modul, das optimiert ein paar SVG-Dateien, und backt sie zu SVG-Sprite-Typen einschließlich traditioneller CSS-Sprites für Hintergrund- und / oder Vordergrundbilder, SVG-Stapel und mehr.
Quasi
Mit quasi kannst du Quasikristallbilder erzeugen wie das, was Sie unten sehen. Dieser Generator ist experimentell, aber die Ergebnisse sind definitiv cool. Sie können herumspielen, indem Sie den Wert der Optionen ändern und dann die Ergebnisse mit der Schaltfläche 'Save SVG' herunterladen.
Einfaches Muster
Erstellen von Mustern mit SVG war noch nie einfacher oder macht mehr Spaß. Laden Sie Ihr Bild hoch, verkleinern oder ändern Sie den Abstand, drehen Sie und färben Sie neu ein, bis Sie ein schönes Muster erhalten. Sie können eine Vorschau des Ergebnisses anzeigen, bevor Sie es herunterladen.
Trianglify Generator
Erstellen Sie schöne geometrische SVG-Muster mit Trianglify Generator. Sie können die Farbzufälligkeit / -variante, die Granularitätsgröße einstellen und eine Farbpalette auswählen, mit der Sie arbeiten möchten. Dieses Tool ist eine GUI-Version von Trianglify.
SVG-Farbverlauf
Sie wissen, dass Sie mit CSS Farbverläufe erstellen können, aber wussten Sie, dass Sie dies auch mit SVG tun können? Der einfachste Weg zu Gradienten auf SVG erzeugen ist mit diesem Werkzeug. Geben Sie einfach Start und Stoppfarbe ein, dann erhalten Sie den Code für das generierte Ergebnis. Ein Fallback für CSS ist ebenfalls enthalten.
PSD nach SVG exportieren
Wenn Sie Photoshop als Bildeditor für Ihre Arbeit verwenden, müssen Sie dies manchmal tun Wandeln Sie Ihr Design im Photoshop-Arbeitsbereich in SVG um, Dies ist ein nicht unterstütztes Format in Photoshop. Laden Sie das Skript in dieses Tool herunter und kopieren Sie es in das Adobe Photoshop / Voreinstellungen / Skripts Mappe.
Benennen Sie einen Vektorebenennamen mit der SVG-Erweiterung um (z. B. Layer1 wird zu Layer1.svg), und Sie können das Skript jetzt ausführen Datei> Skripte> PS in SVG.
SVG-Filter
Wissen Sie, dass Sie mit SVG Effekte wie Farbton, Sättigung, Unschärfe, lineare Farbüberlagerung und viele andere Effekte zu Bildern hinzufügen können? Hier ist ein Werkzeug das visualisiert diese Effekte und gibt Ihnen einen Ausschnitt um es einfach zu machen den Effekt einbetten in dein Projekt.
SVG Morpheous
SVG Morpheous ist eine JavaScript-Bibliothek, die es Ihnen ermöglicht Verwandeln Sie ein SVG-Symbol von einer Form in eine andere. Sie können den Beschleunigungseffekt, die Dauer von Übergangsanimationen sowie die Drehrichtung einstellen.
Clip-Pfadgenerator
Mit SVG können Sie mit Shape auf den Bildclip klicken. Dies ist ziemlich einfach, wenn die Form die Form eines Quadrats oder eines Kreises hat. Aber was wenn die Form eine mit vielen Punkten ist oder eine polygonale Form ist? Dort brauchen Sie das Werkzeug "Clip Path Generator".
Chartist.js
Chartist.js ist eine Bibliothek für Erstellen Sie individuell anpassbare responsive Diagramme. Es verwendet SVG zur Anzeige der Diagramme, die auch mit SMIL animiert werden können. Mit dieser Bibliothek können Sie Liniendiagramme, Kreisdiagramme, Balkendiagramme und andere Diagrammtypen erstellen und sogar Animationen hinzufügen.
SVG-Strichgenerator
Dies ist ein einfaches Werkzeug gestrichelte Linien erzeugen unter Verwendung von SVG Schlaganfall-Strich. Wählen Sie zunächst einen Strich-Typ aus der Liste aus und passen Sie ihn dann in Bezug auf Breite, Höhe, Drehung oder Farbe an. Anschließend können Sie den HTML-Code und das CSS verwenden, um diese Strichlinie in Ihrem Projekt anzuwenden.
Methode Draw: Ein einfacher SVG-Editor
Method Draw ist ein webbasierter SVG-Editor mit einem intuitive Benutzeroberfläche mit Werkzeugen auf beiden Seiten der Leinwand. Sie können Linien, Formen zeichnen, Text eingeben oder integrierte Formen verwenden und dann die Eigenschaften der gezeichneten Objekte bearbeiten. Exportieren Sie das Bild im SVG-Format (auch im SVG-Base64-Format) oder speichern Sie es direkt in PNG.
Exportieren Sie Flash in animiertes SVG
Obwohl es nicht mehr sehr beliebt ist, besteht die Chance, dass einige von Ihnen Schwierigkeiten haben, Flash loszulassen. Wenn ja, kannst du Verwandeln Sie Ihre Flash-Animation in SVG, damit sie mit neueren Technologien kompatibel bleibt. Dieses Tool ist eine Erweiterung der Flash-Anwendung und kann mit CS5, CS6 und CC verwendet werden.
Sie können in SVG exportieren, wenn es um Shapes, Bitmaps-Symbole, klassische Bewegungs-Tweens und Shape-Tweens geht (für andere ist der Erfolg fraglich)..
