SVG-Gradientenimplementierung

Ist es möglich, diese Art von unscharfem Verlauf in einem SVG wiederherzustellen?

svg gradient Jared Garcia
quelle

Antworten:

Ja und nein.

In Inkscape können Sie ein Verlaufsnetz erstellen und als SVG speichern. Die in Browsern verwendeten SVG-Standards unterstützen jedoch noch keine Verlaufsnetze. Dies könnte sich in Zukunft ändern, aber vorläufig nicht.

Eine andere Methode, die in Browsern funktioniert, besteht darin, mehrere feste Objekte hinzuzufügen, sie zu verwischen und sie in eine Schnittmaske zu legen. Dies ist immer noch eine reine Vektorlösung, sie ist nicht gerastert.

Hier ist die SVG für die Version, die in Browsern funktioniert, wenn Sie es möchten.

Bearbeiten : Der obige Link zur SVG ist nicht mehr verfügbar, daher habe ich ihn entfernt.

Billy Kerr
quelle

Das ist cool! Das SVG im Link sieht jedoch nicht wie die in Ihrer Antwort angegebene Beilage aus ... es sieht viel leichter aus. Irgendein Grund dafür?

Jared Garcia

@JaredGarcia Ich habe keine Ahnung warum - meine Bildschirmaufnahme stimmt genau mit der SVG auf meinem Computer in Inkscape überein - aber stellen Sie sicher, dass Sie die neueste Version von Inkscape verwenden - jetzt in Version 0.92

Billy Kerr

Ah, ich habe es im Browser auf meinem Handy direkt über diesen Download-Link angezeigt. Ich werde es in Inkscape öffnen und es überprüfen.

Jared Garcia

@JaredGarcia poste das stattdessen als neue Frage, damit es richtig beantwortet werden kann.

Andrew T.

Das Verwischen in Browsern ist sehr teuer. Sie können den gleichen Effekt erzielen, indem Sie Hintergrundverläufe überlagern. Diese sind sogar animierbar. Und Sie können den Hintergrund-Mischmodus für zusätzliche Effekte in modernen Browsern verwenden.

PieBie

Es kann in Illustrator und Inkscape als Verlaufsnetz erstellt werden. Beim Speichern als SVG in Legacy Illustrator wurde es in ein Bitmap-Bild umgewandelt. Offensichtlich wusste Illustator es vor ungefähr 6 Jahren, aber die SVG-Sprache wusste es nicht.

Beim Speichern in Inkscape als einfaches SVG und nicht als Inkscape SVG blieb es als Verlaufsnetz erhalten, und das Öffnen der SVG-Datei mit einem Texteditor ergab, dass der Befehl meshgradient vorhanden ist. Siehe das Code-Snippet

Ohne die Standards zu kennen, kann ich also sagen: "Es ist zumindest in Inkscape's einfachem SVG implementiert."

Hoffentlich sagt jemand, der über den SVG-Entwicklungsstatus informiert ist, etwas Genaues.

user287001
quelle

Sie können hier direkt Code mit der richtigen Code-Formatierung einfügen. Sie müssen keinen Screenshot veröffentlichen.

Wrzlprmft

Leider werden Inkscape-Verlaufsnetze in Google Chrome oder Firefox noch nicht unterstützt.

Billy Kerr

Können Sie den SVG-Code posten

Jared Garcia

@ JaredGarcia Ich habe es nicht. Ich habe nur 10 Knoten von 25 gefüllt, um zu sehen, dass es das richtige Aussehen gibt. Du kannst es selbst machen. Importieren Sie das Bild in Inkscape, erstellen Sie ein Quadrat mit der gleichen Größe, legen Sie den Fülltyp = Verlaufsgitter fest, fügen Sie mit dem Netzwerkzeug weitere 3 Zeilen und Spalten hinzu, wählen Sie mit dem Knotenwerkzeug nacheinander die Knoten aus und nehmen Sie mit dem Farbwähler die Farbe aus dem importierten Bild. Als einfaches SVG speichern, im Win Notepad öffnen, um den Code anzuzeigen.

user287001

Wenn Ihr Ziel ein leichter, skalierbarer Netzverlauf ist, können Sie diese Methode ausprobieren:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

Es ist kein Vektor, aber es könnte genauso gut sein, da die Dateigröße sehr klein ist und das Bild unendlich skaliert.

Peterhry
quelle

Willkommen bei GDSE - glaf, Sie hier zu haben! Bitte schauen Sie sich um Tour und bekommen ein Gefühl dafür , wie wir fragen gerne Wie fragen und zu beantworten wie man Antwort Fragen. Es ist wahrscheinlich eine gute Idee , auch an dem Gesamtverhalten Codes zu suchen , während Sie rund um gesuchte Hilfe Ihre Antwort ist eine gute Antwort in Bezug auf die Anwendbarkeit , was Sie geteilt haben, aber hier bei GDSE bevorzugen wir Links als Referenz zu verwenden , nur oder um Ressourcen zu binden, wenn sich Links allzu leicht ändern oder verschwinden: Können Sie den Inhalt, an den Sie gebunden sind, in Ihrer Antwort zusammenfassen?

GerardFalla