Softonic

SVG-avgränsargenerator

Steg 1 / 3
Nästa

Landningssidor har sällan hårda horisontella skarvar mellan färgade sektioner längre, de smälter in i varandra genom en kurvad våg, en vinklad sluttning, en rad trianglar. Alla dessa är enkla SVG-former: en viewBox dimensionerad efter sidans bredd, en polygon eller path fylld med nästa sektions bakgrundsfärg, förankrad längst ner i den avgående sektionen. Den här generatorn bygger den formen i fem stilar (våg, kurva, sluttning, trianglar, trappor) med valfri bredd, höjd, färg och vertikal vändning du behöver.

Så bygger du en sektionsavgränsare

  1. 1

    Välj en stil

    Våg (S-kurva), kurva (enkel båge), sluttning (diagonal), trianglar (sicksack), trappor (trappstegsformad).

  2. 2

    Ställ in bredd och höjd

    Bredd = sidans bredd (1200-1920). Höjd = hur hög avgränsaren är (oftast 50-200 px).

  3. 3

    Välj fyllningen

    Välj nästa sektions bakgrundsfärg så att avgränsaren smälter sömlöst in i den.

  4. 4

    Vänd vertikalt

    Slå på flipY för att invertera formen om du behöver att den pekar uppåt istället för nedåt.

  5. 5

    Kopiera SVG:n

    Klistra in längst ner i den avgående sektionen eller längst upp i den inkommande. Använd `preserveAspectRatio="none"` (redan inkluderat) så att formen sträcks med visningsområdet.

De fem stilarna och när du använder dem

Stil Känsla Bra mellan
Våg Mjuk, vänlig Hero → omdömen, pastellpaletter
Kurva Ren, elegant Funktionsrutnät → CTA, minimalistisk design
Sluttning Modern, djärv Mörk hero → ljust innehåll, högkontrasttema
Trianglar Skarp, teknisk Utvecklarverktyg, SaaS-dashboards
Trappor Strukturerad, retro Pristabeller, redaktionella layouter

Släpp in en avgränsare i din märkning

Typisk placering längst ner i en sektion:

<section class="hero">
  <!-- hero-innehåll -->
  <div class="divider" aria-hidden="true">
    <!-- klistra in SVG:n här -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Varför preserveAspectRatio="none"

Som standard skalar en SVG enhetligt. För en avgränsare som spänner över visningsområdet vill du att formen sträcks horisontellt, en våg från kant till kant, inte en liten våg centrerad på sidan. preserveAspectRatio="none" säger åt renderaren att förvränga bildförhållandet fritt, vilket är precis vad avgränsare behöver.

Tillgänglighet och SEO

  • Markera omslaget aria-hidden="true" så att skärmläsare hoppar över den dekorativa formen.
  • Håll SVG:n under några kilobyte, stora inline-SVG:er fördröjer DOM-tolkningen. Utdatan här ligger väl under 1 KB.
  • Undvik rasterbilder för avgränsare; de pixelerar på ultrabreda skärmar och retina-displayer.

Vanliga frågor

Inte strikt. SVG:ns width-attribut anger den inneboende storleken, men med preserveAspectRatio="none" och en CSS width: 100% fyller formen valfri behållare. Att sätta bredden till ett jämnt tal som 1200 håller siffrorna i pathen lätta att läsa.

Det är oftast SVG-elementets standard-inline-baslinje. Lägg till display: block (eller vertical-align: bottom) på SVG:n för att ta bort glipan.

Ja. Generera två eller tre avgränsare med olika färger och opaciteter och stapla dem. Förskjut var och en med några pixlar via margin-top eller CSS transform för en parallaxkänsla.

Den genererade SVG:n är statisk. För animerade vågor, applicera en CSS transform: translateX()-keyframe på omslaget, eller använd två kopior sida vid sida och låt dem glida.

Nej. Inget lagras, SVG:n renderas på nytt varje gång från de aktuella formulärvärdena.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Invertera färger i bilden

Vänd varje RGB-kanal i en bild om för att få en negativbild – användbart vid kreativa redigeringar och när du ska titta på filmskanningar.

Verktyget finns på andra språk