SVG-Gradientenimplementierung


11

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

Geben Sie hier die Bildbeschreibung ein

Antworten:


13

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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.


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

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

1
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

2

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

Geben Sie hier die Bildbeschreibung ein

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.


2
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

1

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.


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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.