Kortversjonen
- Elementet meshgradient ble foreslått i SVG 2-utkast, men ingen av de store nettleserne implementerte det, og det er ikke del av den publiserte standarden nettleserne følger.
- Inkscape kan lage mesh-gradienter, og eksportene bruker en JavaScript-polyfill for å vises i nettlesere.
- Den mest pålitelige måten å få mesh-uttrykk i SVG er noen fargede former myknet med feGaussianBlur eller flere radiale gradienter i lag med gjennomsiktige kanter.
- Et rasterbilde eksportert fra et designverktøy er det enkleste valget når gradienten aldri trenger å endres, og WebP eller PNG holder filen liten.
- Uansett metode bør du legge litt korn over resultatet for å skjule bånding i de myke overgangene.
På denne siden
En ekte SVG mesh-gradient fungerer ikke i nettlesere i dag. Elementet <meshgradient> dukket opp i SVG 2-utkast, der fargene ligger i hjørnene av et rutenett med flater og blandes over hver flate. Chrome, Safari og Firefox har aldri lansert støtte for det. For å få det myke, flerfargede uttrykket folk mener med en mesh-gradient, bygger du med ting som faktisk gjengis: uskarpe former, radiale gradienter i lag, et rasterbilde eller en shader.
Hva skjedde med meshgradient
Mesh-elementet var med i arbeidsutkastene til SVG 2 i flere år. Det beskrev en overflate som rader av Coons-flater, hver med fire hjørnefarger og buede kanter. Slik fungerer gradientnett i illustrasjonsprogrammer. Nettleserutviklerne implementerte det ikke, og funksjonen ble utelatt fra SVG 2-versjonen som gikk videre. Limer du mesh-markup inn på en side, ignorerer nettleseren den og lar formen stå uten fyll, eller med en reservefarge hvis du har angitt en.
Gjengis ikke i nettlesere
<meshgradient>med<meshrow>og<meshpatch>- Gradientnett fra Illustrator lagret som redigerbar SVG
- Mesh eksportert fra Inkscape uten polyfill
<hatch>-mønstre fra samme utkast
Gjengis overalt
- Former uskarpet med
feGaussianBlur - Flere
<radialGradient>-fyll i lag - Et innebygd PNG- eller WebP-bilde
- Radiale CSS-lag eller et WebGL-lerret
Inkscape er det viktige unntaket på produksjonssiden. Mesh-verktøyet lager ekte mesh-markup, og ved lagring for nettet kan det legge til en liten JavaScript-polyfill som tegner nettet ved innlasting. Det fungerer, men du sender med et skript for å tegne en bakgrunn. Det vises ikke der skript ikke kjøres, som i en <img>-tagg eller mange e-postklienter.
Metode 1: uskarpe former
Dette er det nærmeste du kommer et mesh i ren SVG. Plasser tre til fem fylte sirkler eller ellipser der du vil ha hver farge, og gjør gruppen kraftig uskarp. Uskarpheten blander nabofarger i hverandre slik et mesh gjør, og du kan flytte hver fargeklump uavhengig.
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
<defs>
<filter id="soften" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="120" />
</filter>
</defs>
<rect width="1200" height="800" fill="#0f0b1e" />
<g filter="url(#soften)">
<circle cx="260" cy="200" r="260" fill="#7c3aed" />
<circle cx="900" cy="160" r="240" fill="#f472b6" />
<ellipse cx="760" cy="640" rx="360" ry="220" fill="#0ea5e9" />
<circle cx="200" cy="700" r="200" fill="#312e81" />
</g>
</svg>Uskarphet er ikke gratis. En stor feGaussianBlur beregnes på nytt hver gang SVG-en tegnes, så bruk den til statiske bakgrunner fremfor noe som ruller eller animeres. Se uskarpe gradienter for samme idé laget helt i CSS.
Metode 2: radiale gradienter i lag
Hver <radialGradient> kan gå fra en farge til gjennomsiktig. Fyll flere rektangler i full størrelse, ett per gradient, så overlapper de og gir et mesh-uttrykk. Det brukes ikke noe filter, så gjengivelsen er lettere enn uskarphet og holder seg skarp ved all zoom.
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<radialGradient id="a" cx="0.2" cy="0.25" r="0.6">
<stop offset="0" stop-color="#7c3aed" />
<stop offset="1" stop-color="#7c3aed" stop-opacity="0" />
</radialGradient>
<radialGradient id="b" cx="0.8" cy="0.2" r="0.55">
<stop offset="0" stop-color="#f472b6" />
<stop offset="1" stop-color="#f472b6" stop-opacity="0" />
</radialGradient>
<radialGradient id="c" cx="0.6" cy="0.85" r="0.65">
<stop offset="0" stop-color="#0ea5e9" />
<stop offset="1" stop-color="#0ea5e9" stop-opacity="0" />
</radialGradient>
</defs>
<rect width="1200" height="800" fill="#0f0b1e" />
<rect width="1200" height="800" fill="url(#a)" />
<rect width="1200" height="800" fill="url(#b)" />
<rect width="1200" height="800" fill="url(#c)" />
</svg>transparent. Det holder kantene rene i alle SVG-gjengivere, også eldre.Dette kan overføres nesten direkte til CSS, som ofte er et bedre sted for det. CSS mesh-gradienter viser samme lagdeling med radial-gradient() og forklarer hvordan du styrer hvor fargene overlapper. SVG-versjonen passer når bakgrunnen må følge med som fil, for eksempel en nedlasting eller en ressurs i et designsystem. Les mer om gradientelementer i SVG-gradienter.
radial-gradient(circle at 20% 25%, #7c3aed 0%, transparent 48%), radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 44%), radial-gradient(circle at 60% 85%, #0ea5e9 0%, transparent 52%), linear-gradient(#0f0b1e, #0f0b1e)Metode 3: eksporter et rasterbilde
Hvis du har laget et ekte gradientnett i et illustrasjonsprogram og det aldri trenger å endres, eksporter det som bilde. Et mesh i 1920×1080 komprimeres godt som WebP og holder seg jevnt som PNG. Du kan bygge det inn med et SVG <image>-element eller bruke det som CSS-bakgrunn. Du mister uavhengigheten av oppløsning, men beholder hver kurve i det opprinnelige nettet.
Velg riktig metode
Fil
Skaleres
Passer best til
Fil
Skaleres
Passer best til
Fil
Skaleres
Passer best til
Fil
Skaleres
Passer best til
Fil
Skaleres
Passer best til
- 1
Velg tre til fem farger
Nærliggende fargetoner blandes rent. Motsatte farger møtes i en grumsete midte, som grumsete gradienter forklarer.
- 2
Plasser farger, ikke stopp
Bestem hvor hver farge skal ligge på lerretet. Det er hele forskjellen mellom et mesh og en lineær gradient.
- 3
La et rolig område stå igjen
Hold ett område nær bakgrunnsfargen der en overskrift skal stå.
- 4
Avslutt med korn
Litt støy får overflaten til å føles gjennomtenkt og skjuler bånding.
Når du vil ha en bakgrunn i mesh-stil uten å bygge den for hånd, er en Gradiently-Mark en oppskrift med farger, lys, materiale og korn som gjengis direkte i alle størrelser, holder det roligste området bak ordene og med Pro eksporteres som PNG, SVG eller PDF. For animerte mesh-bakgrunner på en nettside er shader-gradienter neste steg.
Spørsmål folk stiller
Støtter nettlesere SVG mesh-gradienter?
Nei. Elementet meshgradient var med i SVG 2-utkast, men ingen av de store nettleserne implementerte det. Det gjengir derfor ingenting uten en JavaScript-polyfill.
Hvordan lager jeg en mesh-gradient i SVG som fungerer?
Gjør noen fargede sirkler uskarpe med feGaussianBlur, eller stable flere radialGradient-fyll som går mot gjennomsiktig. Begge vises i alle nettlesere.
Kan jeg bruke Inkscape mesh-gradienter på en nettside?
Ja, hvis du tar med JavaScript-polyfillen Inkscape kan legge til ved lagring. Uten den ignorerer nettleserne nettet, og det fungerer ikke inni en img-tagg.
Er en CSS mesh-gradient bedre enn SVG?
For en bakgrunn som bare brukes på en nettside, er radiale CSS-lag enklere. SVG er bedre når gradienten må finnes som en selvstendig fil.
Hvorfor har den uskarpe SVG-gradienten harde kanter?
Filterområdet beskjærer uskarpheten. Utvid det med x="-50%" y="-50%" width="200%" height="200%" på filterelementet.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår