SVG-cirkeltekstgenerator
Tekst op een cirkelvormig pad is een vertrouwd detail op badges, zegels en logo’s. SVG gebruikt hiervoor <textPath>: een tekstelement volgt een onzichtbaar pad. Deze generator maakt de volledige SVG in de browser. Voer tekst in en stel straal, lettergrootte, letterafstand, startpositie, kleur en padrichting in. Daarna kun je de SVG kopiëren of downloaden.
Hoe tekst rond een cirkel te kronkelen
-
1
Typ de tekst in
Korte zinnen (3–8 woorden) zijn het beste te lezen; lange zinnen kronkelen zichzelf in een kleine buiging.
-
2
De straal instellen
Een grotere straal betekent een zachtere boog en daardoor leesbare lettertekens; als de straal te klein is, kantelen de lettertekens sterk.
-
3
Verplaats het startpunt
Met Beginverschuiving % verplaats je het eerste teken langs het pad. Dit is een positie op het pad, geen vrije hoekrotatie.
-
4
Stel grootte, afstand en richting in
De beschikbare bediening wijzigt lettergrootte, letterafstand, kleur en de richting van het pad met of tegen de klok in.
-
5
Kopieer de SVG
De uitvoering omvat de onzichtbare padstructuur, het model `<textPath>` en de letterstijlinstellingen, en is direct bruikbaar op elke pagina.
Hoe textPath werkt in de praktijk
<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>
Het attribuut d gebruikt de commando’s m/a (moveto/arc) om een volledige cirkel te tekenen. Vervolgens plaatst <textPath> de tekststring langs deze cirkel. startOffset bepaalt een percentage van de totale lengte van de route; text-anchor="middle" centreert de tekst op die positie.
Radius versus leesbaarheid
| Radius (px) | Gevoel | Geschikt voor |
|---|---|---|
| 40-60 | Uiterst strak en vervormd | Enkel abstracte logotypen |
| 80–120 | Classic-embleem | App-icoonen, munten |
| 140-200 | Zachte boog | Koffielogo’s en emblemen |
| 250+ | Bijna rechtop | Kopverfraaiing |
Veelgebruikte voorinstellingen
- Bovenste boog, begint bij 180° en beslaat een hoek van 180° op de cirkel; de bovenste helft is leesbaar van links naar rechts.
- Onderste boog met omkeer: verander de bewegingsrichting of gebruik
side="right"zodat de tekst correct omgekeerd wordt weergegeven. - Volledige ring, de tekst wordt één keer omgevouwen. Voeg een voorafgaande en een achterafgaande spacers toe (
.) zodat de verbindingspunt niet onnatuurlijk overkomt.
Exporttippen
– Inline SVG stelt u in staat de vulling te thematiseren met currentColor of een aanpasbare CSS-eigenschap.
Vermeid het plaatsen van een webfont binnen een SVG; declareer hem liever in uw globale CSS, zodat de browser de font opnieuw kan gebruiken.
- Als u een statische afbeelding (PNG of favicon) nodig hebt, verwerkt SVG met een rasterisator tot de gewenste eindgrootte; SVG schaalt verliesloos, maar sommige platformen vereisen nog steeds een bitmap.
Veelgestelde vragen
Standaard volgt textPath de richting van de padlijn. Een cirkel die in horizontale richting wordt getekend, zet de onderste helft omhoog. U kunt de onderste helft ook als een aparte boog in tegenhorizontale richting tekenen, side="right" (SVG 2) gebruiken, of de tekst splitsen in twee elementen.
Ja. Het gegenereerde <text>-element ondersteunt standaard SVG/CSS-attributen: fill, font-weight, font-style en letter-spacing. Deze kunnen worden gewijzigd direct in het codefragment of met externe CSS.
<textPath> wordt al meer dan tien jaar ondersteund in Chrome, Firefox, Safari en Edge. IE11 biedt slechts een deelmatige ondersteuning; als u deze nog nodig hebt, raadpleeg dan om het logo van tevoren te rasteriseren.
Voeg letter-spacing="2" (of meer) toe aan het tekstelement. Bij een kleine straal kan dit de leesbaarheid aanzienlijk verbeteren.
Nee. De tekst en SVG worden in je browser gemaakt. De frase wordt niet naar de server gestuurd en niet opgeslagen.
Gerelateerde tools
Material Design-kleurkiezer
Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.
Gelinieerd papier generator
Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.
Ruitjespapier-generator
Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.
Instagram-grid-splitter
Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.
Afbeelding naar grijswaarden
Zet kleurenafbeeldingen in uw browser om naar grijswaarden. Gratis en privé, er wordt niets geüpload.
Contactblad maken
Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.
Tool beschikbaar in andere talen
- Generador de Texto en Círculo SVG [ES]
- Tổng hợp công cụ tạo hình vòng tròn SVG [VI]
- مولد نص دائري باستخدام دوائر SVG [AR]
- SVG円形テキストジェネレーター [JA]
- Générateur de texte en cercle SVG [FR]
- Gerador de Texto em Círculo SVG [PT]
- SVG cirkeltext-generator [SV]
- SVG 원형 문자 생성기 [KO]
- Generator Generik Lingkaran SVG [ID]
- SVG-Kreistext-Generator [DE]
- เครื่องมือสร้างเส้นโค้งวงกลมแบบ SVG [TH]
- Generator tekstu na okręgu SVG [PL]
- Генератор круговых текстов для SVG [RU]
- SVG Daire Metni Oluşturucu [TR]
- SVG 圆形文本生成器 [ZH]
- SVG Circle Text Generator [EN]
- Generatore di Testo Circolare SVG [IT]