Softonic

SVG cirkeltext-generator

Steg 1 / 2
Nästa

Text på en cirkelbana är en vanlig detalj i märken, sigill och logotyper. SVG gör detta med <textPath>: ett textelement följer en osynlig bana. Generatorn skapar hela SVG:n i webbläsaren. Skriv texten och justera radie, teckenstorlek, bokstavsavstånd, startposition, färg och banans riktning. Kopiera eller ladda sedan ned SVG:n.

Så kurvar du text runt en cirkel

  1. 1

    Skriv texten

    Korta fraser (3-8 ord) läses bäst; långa meningar lindar förbi sig själva på en liten radie.

  2. 2

    Ställ in radien

    Större radie = mjukare kurva = mer läsbara bokstäver. För liten och bokstäverna lutar kraftigt.

  3. 3

    Flytta startpunkten

    Använd Startoffset % för att flytta första tecknet längs banan. Det är en position på banan, inte en fri vinkelrotation.

  4. 4

    Justera storlek, avstånd och riktning

    Reglagen ändrar teckenstorlek, bokstavsavstånd, färg och banans riktning medurs eller moturs.

  5. 5

    Kopiera SVG:n

    Utdatan inkluderar den osynliga pathen, `<textPath>` och teckensnittsstyling, redo att släppa in på vilken sida som helst.

Så fungerar textPath under huven

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

d-attributet använder kommandona m/a (moveto / arc) för att rita en hel cirkel. <textPath> lägger sedan ut strängen längs den. startOffset är en procentandel längs pathen; text-anchor="middle" centrerar texten på den förskjutningen.

Radie jämfört med läsbarhet

Radie (px) Känsla Bra för
40-60 Mycket snäv, förvrängd Endast abstrakta logotyper
80-120 Klassiskt märke Appikoner, mynt
140-200 Mjuk båge Kaféloggor, emblem
250+ Nästan rak Sidhuvudsdekoration

Vanliga förinställningar

  • Toppbåge, börja vid 180°, sträck över 180° av cirkeln. Övre halvan är läsbar från vänster till höger.
  • Bottenbåge med vändning, vänd pathriktningen eller använd side="right" så att texten läses korrekt upp och ner.
  • Hel ring, texten lindar en gång. Lägg till en inledande och avslutande utfyllnad (.) så att skarvpunkten inte är skärande.

Exporttips

  • Inline-SVG låter dig tematisera fyllningen med currentColor eller en CSS-anpassad egenskap.
  • Undvik att bädda in ett webbteckensnitt inuti SVG:n, deklarera det i din globala CSS istället, så att webbläsaren återanvänder laddningen.
  • Om du behöver en statisk bild (PNG, favicon), kör SVG:n genom en rasteriserare i den slutliga storlek du behöver; SVG skalar förlustfritt men vissa plattformar vill fortfarande ha en bitmapp.

Vanliga frågor

Som standard följer textPath pathriktningen. En cirkel ritad medurs sätter nedre halvan upp och ner. Antingen ritar du nedre halvan som en separat moturs båge, använder side="right" (SVG 2), eller delar texten i två element.

Ja. Det genererade <text>-elementet accepterar standardattribut för SVG/CSS: fill, font-weight, font-style, letter-spacing. Ändra dem inline eller med extern CSS.

<textPath> har stötts i Chrome, Firefox, Safari och Edge i över ett decennium. IE11 har partiellt stöd; om du fortfarande behöver det, rasterisera märket i förväg.

Lägg till letter-spacing="2" (eller mer) på textelementet. På en snäv radie kan detta avsevärt förbättra läsbarheten.

Nej. Texten och SVG:n skapas i din webbläsare. Frasen skickas inte till servern och lagras inte.

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.

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.

Flaggskapare

Formge en enkel egen 3:2-flagga i webbläsaren med sex layouter, färger, text och en symbol. Hämta SVG eller PNG, eller öppna webbläsarens utskriftsdialog.

Skapa kontaktkarta

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

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.

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.

Verktyget finns på andra språk