Text zu SVG Konverter

Das Tool bietet eine Auswahl an beliebten Google Fonts an, die zum Zeitpunkt des Renderns geladen werden und Styles wie sans-serif, serif, monospace und Display abdecken. Gängige Auswahlmöglichkeiten sind Roboto, Inter, Open Sans, Montserrat, Lato sowie Display-Schriften wie Anton und Oswald. Die Schriften werden in der Vorschau über Google Fonts gerendert und in den SVG-Output eingebettet, sodass die richtige Schrift auch auf Systemen erscheint, die sie nicht lokal installiert haben.

Ja. Der Icon-Bereich ermöglicht es Ihnen, integrierte Icons hinzuzufügen: Email, Phone, Location, Web, User, Star und Heart. Wählen Sie aus, ob das Icon links oder rechts von Ihrem Text platziert werden soll, und passen Sie die Icon-Größe unabhängig an. Das Icon und der Text werden zu einem einzelnen SVG-Element zusammengefügt, was es einfach macht, professionelle Kontakt-Badges oder beschriftete Grafiken ohne ein Design-Tool zu erstellen.

SVG (roher XML-Code), React JSX-Komponente (bereit zum Einfügen in ein React-Projekt), React Native SVG-Komponente, PNG Rasterbild (mit konfigurierbarer Skalierung für Retina-Ausgabe) und Base64 Data URI (die als data: URL kodierte SVG zum direkten Einbetten in einem HTML img src oder CSS background-image). Kopieren Sie jedes Format in die Zwischenablage oder laden Sie die Datei herunter, je nach Ihrem Workflow.

Eine Data URI kodiert die SVG als Base64-String und bettet sie direkt als URL ein. Anstatt auf eine externe Datei zu verweisen (src="logo.svg"), verwenden Sie src="data:image/svg+xml;base64,...". Dies eliminiert eine HTTP-Anfrage und funktioniert in Umgebungen, in denen kein externes File-Hosting verfügbar ist – HTML-E-Mails (einige Clients), lokal geteilte HTML-Dateien oder CSS background-image Werte. Der Nachteil ist, dass der kodierte String größer als die ursprüngliche SVG-Datei ist.

Ja. Die Download PNG-Schaltfläche rasterisiert die SVG auf ein Canvas in der konfigurierten Skala und lädt sie als PNG-Datei herunter. Verwenden Sie Scale 1x für Standardanzeigen und 2x oder höher für Retina/High-DPI-Bildschirme. PNG ist nützlich, wenn das Ziel keine SVG unterstützt – Social-Media-Profilbilder, E-Mail-Clients, die nur Bilder zulassen, oder Apps, die nur Rasterformate akzeptieren.

Aktivieren Sie das Kästchen "Transparent" unter Background Color. Mit aktivierter Transparenz wird das SVG-Background-Attribut entfernt und der PNG-Export verwendet einen transparenten Hintergrund. Dies ist wichtig für Logos und Badges, die auf verschiedenen farbigen Hintergründen liegen müssen, ohne einen weißen Rahmen darum zu haben.

Nein. Die gesamte SVG-Erzeugung, das Rendering und der Export finden in Ihrem Browser statt. Die Font-Dateien werden als Teil des normalen Laden von Schriften vom Google Fonts CDN abgerufen, aber Ihr eigentlicher Textinhalt verlässt niemals Ihr Gerät. Es werden keine Daten an einen Backend-Server gesendet und nichts wird gespeichert.