Implémentation du gradient SVG

Est-il possible de recréer ce type de dégradé flou dans un SVG?

svg gradient Jared Garcia
la source

Réponses:

Oui et non.

Il est possible de créer un filet de dégradé dans Inkscape et de l'enregistrer en tant que SVG. Cependant, les normes SVG utilisées dans les navigateurs ne prennent pas encore en charge les maillages dégradés. Cela pourrait changer à l'avenir, mais pour le moment non.

Une autre méthode qui fonctionne dans les navigateurs consiste à ajouter plusieurs objets solides, à les estomper et à les placer dans un masque d'écrêtage. C'est toujours une solution vectorielle pure, elle n'est pas tramée.

Voici le SVG pour la version qui fonctionne dans les navigateurs, si vous le souhaitez.

Edit : le lien ci-dessus vers le SVG n'est plus disponible, je l'ai donc supprimé.

Billy Kerr
la source

C'est super! Le SVG dans le lien ne ressemble cependant pas à l'encart fourni dans votre réponse ... il semble beaucoup plus léger. Une raison à cela?

Jared Garcia

@JaredGarcia Je ne sais pas pourquoi - ma capture d'écran correspond exactement au SVG sur mon ordinateur dans Inkscape - mais assurez-vous que vous utilisez la version la plus récente d'Inkscape - maintenant à la version 0.92

Billy Kerr

Ah, je le regardais dans le navigateur de mon mobile directement depuis ce lien de téléchargement. Je vais l'ouvrir dans Inkscape et le vérifier.

Jared Garcia

@JaredGarcia poste plutôt cela comme une nouvelle question afin de pouvoir y répondre correctement.

Andrew

Le flou dans les navigateurs coûte vraiment cher. Vous pouvez obtenir le même effet en superposant les dégradés d'arrière-plan. Ce sont même animables. Et vous pouvez utiliser le mode fondu pour un effet supplémentaire dans les navigateurs modernes.

PieBie

Il peut être créé dans Illustrator et Inkscape en tant que filet de dégradé. Lorsqu'il a été enregistré au format SVG dans Illustrator hérité, il s'est transformé en image bitmap. Évidemment, Illustator le savait il y a environ 6 ans, mais le langage SVG ne le savait pas.

Lorsqu'il est enregistré dans Inkscape en tant que SVG ordinaire, et non en tant que SVG Inkscape, il reste en tant que filet de dégradé et l'ouverture du fichier SVG avec un éditeur de texte révèle qu'il existe une commande meshgradient. Voir l'extrait de code

Donc, sans connaître les normes, je peux dire "C'est au moins implémenté dans le SVG ordinaire d'Inkscape."

J'espère que quelqu'un programmeur conscient du statut de développement SVG dit quelque chose d'exact.

user287001
la source

Vous pouvez directement inclure du code ici avec un formatage de code approprié. Pas besoin de poster une capture d'écran.

Wrzlprmft

Malheureusement, les maillages dégradés d'Inkscape ne sont pas encore pris en charge dans Google Chrome ou Firefox.

Billy Kerr

Pouvez-vous poster le code svg

Jared Garcia

@JaredGarcia Je ne l'ai pas. Je n'ai rempli que 10 nœuds sur 25 pour voir que ça donne le bon look. Tu peux le faire toi-même. Importez l'image dans Inkscape, faites un carré de la même taille, définissez son type de remplissage = filet de dégradé, ajoutez 3 lignes et colonnes de plus avec l'outil de maillage, avec l'outil de nœud sélectionnez un par un les nœuds et avec le sélecteur de couleur prenez le couleur de l'image importée. Enregistrez-le au format SVG, ouvrez-le dans le Bloc-notes Win pour voir le code.

user287001

Si votre objectif est d'avoir un gradient de maillage léger et évolutif, vous pouvez essayer cette méthode:

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

Ce n'est pas un vecteur, mais cela pourrait tout aussi bien être le cas, car la taille du fichier est très petite et l'image évolue à l'infini.

peterhry
la source

Bienvenue à GDSE - glaf pour vous avoir ici! Veuillez jeter un coup d'œil autour de la visite et avoir une idée de la façon dont nous aimons poser les questions Comment demander et répondre Comment répondre aux questions. Il est probablement une bonne idée de regarder les codes de comportement global aussi pendant que vous êtes à la recherche autour du centre d'aide Votre réponse est une bonne réponse en termes de l'applicabilité de ce que vous avez partagé, mais ici , à GDSE nous préférons utiliser des liens pour référence ou pour lier des ressources, car les liens changent ou disparaissent trop facilement: pourriez-vous résumer le contenu auquel vous vous attachez dans le corps de votre réponse s'il vous plaît?

GerardFalla