Mesh-gradienter i SVG: det, der virker i dag

En ægte SVG mesh gradient virker ikke i browsere i dag. Elementet <meshgradient> dukkede op i udkast til SVG 2, hvor farverne sidder i hjørnerne af et gitter af felter og blandes hen over hvert enkelt, men Chrome, Safari og Firefox udgav det aldrig. For at få det bløde, mangefarvede look, folk mener med en mesh-gradient, bygger du den af ting, der faktisk bliver vist: slørede former, stablede radiale gradienter, et rasterbillede eller en shader.

Hvad der skete med meshgradient

Mesh-elementet var med i arbejdsudkastene til SVG 2 i flere år. Det beskrev en overflade som rækker af Coons-felter, hvert med fire hjørnefarver og buede kanter, sådan som gradientmasker fungerer i illustrationsprogrammer. Browserproducenterne implementerede det ikke, og funktionen blev udeladt af den version af SVG 2, der gik videre. Indsætter du mesh-markup på en side, ignorerer browseren det og fylder formen med ingenting eller med en reservefarve, hvis du har angivet en.

Inkscape er den bemærkelsesværdige undtagelse på værktøjssiden. Dets mesh-værktøj laver ægte mesh-markup, og når du gemmer til web, kan det inkludere en lille JavaScript-polyfill, der tegner meshen, når siden indlæses. Det virker, men du sender script med for at male en baggrund, og det bliver ikke vist steder, der ikke kører scripts, som et <img>-tag eller mange mailprogrammer.

Metode 1: slørede former

Det er det nærmeste, du kommer en mesh i ren SVG. Placér tre til fem udfyldte cirkler eller ellipser, hvor du vil have hver farve, og slør så gruppen kraftigt. Sløringen blander nabofarver ind i hinanden præcis som en mesh, og du kan flytte hver klat for sig.

<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>

Sløring er ikke gratis. En stor feGaussianBlur beregnes igen, hver gang SVG’en tegnes på ny, så brug den til statiske baggrunde frem for noget, der scroller eller animeres. Samme idé lavet helt i CSS finder du i slørede gradienter.

Metode 2: stablede radiale gradienter

Hver <radialGradient> kan glide fra en farve til gennemsigtig. Udfyld flere rektangler i fuld størrelse, ét pr. gradient, så overlapper de til en mesh. Der er intet filter involveret, så det er lettere at tegne end sløring og forbliver skarpt ved enhver 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>

Det kan oversættes næsten én til én til CSS, som ofte er det bedre hjem for det. Mesh-gradienter i CSS viser den samme lagdeling med radial-gradient() og forklarer, hvordan du styrer, hvor farverne overlapper. SVG-versionen gør sig fortjent til sin plads, når baggrunden skal kunne flyttes som en fil, for eksempel en download eller et aktiv i et designsystem. Mere om gradientelementer finder du i SVG-gradienter.

Metode 3: eksportér et rasterbillede

Har du designet en ægte gradientmaske i et illustrationsprogram, og skal den aldrig ændres, så eksportér den som billede. En mesh i 1920×1080 komprimeres godt som WebP og forbliver glat som PNG; du kan indlejre den med et SVG-element <image> eller bruge den som CSS-baggrund. Du mister opløsningsuafhængigheden, men beholder hver kurve i den oprindelige mesh.

Sådan vælger du den rigtige metode

1. 1

   Vælg tre til fem farver

   Nabonuancer blander sig rent. Modsatte farver mødes i en mudret midte, som mudrede gradienter forklarer.

2. 2

   Placér farver, ikke farvestop

   Beslut, hvor hver farve bor på lærredet. Det er hele forskellen på en mesh og en lineær gradient.

3. 3

   Lad et roligt område være

   Hold ét område tæt på bundfarven, hvor en overskrift skal stå.

4. 4

   Afslut med korn

   Lidt støj får overfladen til at føles bevidst og skjuler banding.

Vil du have en baggrund i mesh-stil uden at bygge en i hånden, er en Gradiently-Mark en opskrift af farver, lys, materiale og korn, der gengives live i alle størrelser, holder sit roligste område bag dine ord og med Pro eksporteres som PNG, SVG eller PDF. Til animerede meshes på en hjemmeside er shader-gradienter næste skridt.