È possibile ricreare questo tipo di sfumatura sfocata in un SVG?
Implementazione gradiente SVG
Risposte:
Sì e no.
È possibile creare una trama sfumata in Inkscape e salvarla come SVG. Tuttavia, gli standard SVG utilizzati nei browser non supportano ancora le trame sfumate. Questo potrebbe cambiare in futuro, ma per ora no.
Un altro metodo che funziona nei browser è quello di aggiungere diversi oggetti solidi, sfocarli e metterli in una maschera di ritaglio. Questa è ancora una soluzione vettoriale pura, non rasterizzata.
Ecco lo SVG per la versione che funziona nei browser, se lo desideri.
Modifica : il link sopra a SVG non è più disponibile, quindi l'ho rimosso.
Questo è figo! L'SVG nel link non assomiglia affatto all'inserto fornito nella tua risposta ... sembra molto più leggero. Qualche motivo per questo?
—
Jared Garcia,
@JaredGarcia Non ho idea del perché - la mia cattura dello schermo corrisponde esattamente all'SVG sul mio computer in Inkscape - ma assicurati di utilizzare la versione più recente di Inkscape - ora alla versione 0.92
—
Billy Kerr,
Ah, lo stavo visualizzando nel browser sul mio cellulare direttamente da quel link per il download. Lo aprirò in Inkscape e lo verificherò.
—
Jared Garcia,
@JaredGarcia pubblica questa come una nuova domanda in modo che possa essere adeguatamente risolta.
—
Andrew T.,
La sfocatura nei browser è davvero costosa. Puoi ottenere lo stesso effetto sovrapponendo i gradienti di sfondo. Questi sono persino animabili. E puoi usare la modalità di fusione di sfondo per un effetto extra nei browser moderni.
—
PieBie
Può essere realizzato in Illustrator e Inkscape come trama sfumata. Se salvato come SVG in Illustrator legacy, è stato trasformato in immagine bitmap. Ovviamente Illustator lo sapeva circa 6 anni fa, ma il linguaggio SVG non lo sapeva.
Quando salvato in Inkscape come semplice SVG, non come Inkscape SVG, è rimasto come mesh gradiente e l'apertura del file SVG con un editor di testo ha rivelato che c'è un comando meshgradient. Vedi lo snippet di codice
Quindi, senza conoscere gli standard, posso dire "È almeno implementato nel semplice SVG di Inkscape".
Spero che qualcuno programmatore consapevole dello stato di sviluppo SVG dica qualcosa di esatto.
È possibile includere direttamente il codice qui con una formattazione corretta del codice. Non è necessario pubblicare uno screenshot.
—
Wrzlprmft
Purtroppo, le trame sfumate di Inkscape non sono ancora supportate in Google Chrome o Firefox.
—
Billy Kerr,
Puoi pubblicare il codice svg
—
Jared Garcia il
@JaredGarcia Non ce l'ho. Ho riempito solo 10 nodi di 25 per vedere che dà l'aspetto giusto. Puoi farcela da solo. Importa l'immagine in Inkscape, crea un quadrato della stessa dimensione, imposta il tipo di riempimento = trama sfumata, aggiungi altre 3 righe e colonne con lo strumento trama, con lo strumento nodo seleziona uno per uno i nodi e con il selettore colore prendi il colore dall'immagine importata. Salva come SVG semplice, apri in Blocco note per vedere il codice.
—
user287001,
Se il tuo obiettivo è avere una sfumatura di mesh leggera e scalabile, puoi provare questo metodo:
https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html
Non è un vettore, ma potrebbe anche essere perché la dimensione del file è super piccola e l'immagine si ridimensiona all'infinito.
Benvenuto in GDSE - glaf per averti qui! Si prega di dare un'occhiata in giro tour e avere un'idea di come ci piace chiedere Come chiedere e rispondere Come rispondere alle domande. Probabilmente è una buona idea esaminare anche i codici comportamentali generali mentre guardi intorno al centro assistenza La tua risposta è una buona risposta in termini di applicabilità ciò che hai condiviso, ma qui in GDSE preferiamo usare i link solo come riferimento o per legare le risorse, poiché i collegamenti cambiano o scompaiono troppo facilmente: potresti riassumere il contenuto a cui ti stai legando nel corpo della tua risposta, per favore?
—
GerardFalla,