./produkt/svglet

Icons, die mit
Ihrem CSS fließen.

Svglet ist das eigene Open-Source-Icon-System von VeratekSoft: Rendert Vektor-Icons als reine CSS-Masken – ohne schwerfällige JavaScript-Bibliotheken, ohne Icon-Fonts und ohne externe Abhängigkeiten. Steuern Sie Farben, Größen und Zustände direkt über standardisiertes CSS.

✓ 0 KB JavaScript-Framework
✓ CSS Mask-Technology
✓ 100 % DSGVO & Lokales Hosting
✓ Gestochen scharf & skalierbar
message Projekt mit uns besprechen code GitHub Repository arrow_forward
Svglet v0.3.0 · Open Source
MIT License
Svglet Icon System Showcase Mockup
HTML Syntax Zero JS Dependencies

<i data-icon="rocket-launch" class="icon-primary"></i>

~2 KB Core Gzip
CSS Mask Pure Vector
DSGVO 100% Lokal
palette

CSS-Masken

Färbbar per color

memory

0 Dependencies

Keine Frameworks

0 Externe CDNs oder Abhängigkeiten
~2 KB Ultra-kompakte Core-Größe (Gzip)
100% Frei & Open Source (MIT)
CSS Maskensteuerung für Farbe & Größe
$ grep --motivation

Warum wir ein eigenes Icon-System entwickelt haben

Beim Bau moderner Webseiten stießen wir immer wieder auf dieselben Probleme: Icon-Fonts erzeugen unscharfe Glyphen und Layout-Shifts, JS-Bibliotheken vergrößern die Ladezeiten, und externe Icon-CDNs verstoßen gegen die DSGVO. Svglet ist unsere Antwort.

memory

Aufgeblähte JS-Bundles & Render-Blockaden

Das Problem: Viele Icon-Bibliotheken laden riesige JavaScript-Dateien oder hunderte ungenutzte SVGs mit, was den PageSpeed verschlechtert und mobile Geräte verlangsamt.

Unsere Antwort: Svglet nutzt native CSS-Masken. Es wird ausschließlich das geladen, was real im DOM verwendet wird – ohne schwere Frameworks.

scale

Unscharfe Glyphen & starrer Font-Zwang

Das Problem: Klassische Icon-Fonts (WOFF/TTF) werden von Browsern als Text gerendert. Das führt zu unscharfen Kanten, Anti-Aliasing-Fehlern und verzögertem Text-Rendering (FOUT).

Unsere Antwort: Echte SVG-Vektormasken bleiben bei jeder Skalierung und auf allen HiDPI-Displays gestochen scharf.

shield

DSGVO-Verstöße durch Drittanbieter-CDNs

Das Problem: Das Einbinden von Icon-Skripten über US-CDNs überträgt Besucher-IPs ohne Einwilligung und erzeugt rechtliche Abmahnrisiken.

Unsere Antwort: 100% lokales Hosting aller SVG-Assets im eigenen Webserver. Keine Datenübertragung an Dritte, volle Kontrolle über Datenflüsse.

palette

Kompliziertes Styling für Theme-Switches

Das Problem: Inline-SVGs erfordern komplexe CSS-Regeln für `fill` und `stroke`, um Farben bei Hover-Zuständen oder Dark-Mode-Umschaltungen zu verändern.

Unsere Antwort: Svglet-Masken vererben die standardmäßige CSS-Property `color`. Farbwechsel und Animationen funktionieren out-of-the-box.

$ tree ./system

Ein Icon-System. Maximale Performance.

Svglet kombiniert die Leistungsfähigkeit moderner Web-Standards mit der Einfachheit eines einzigen HTML-Attributs.

memory
>01

Zero-Dependency Engine

Geringster Footprint im Netz: Kein React, kein Vue, keine Drittanbieter-Bibliotheken erforderlich. Funktioniert in jedem Browser.

palette
>02

Dynamische CSS-Färbung

Vererbung der `color`-Eigenschaft: Ändern Sie Icon-Farben für Buttons, Hover-Zustände und Dark-Mode nahtlos in Ihrem CSS.

scale
>03

Vektor-Präzision & Skalierung

Reine SVG-Masken skaliert vom 12px Icon in Tabellen bis hin zu großen Hero-Grafiken ohne Qualitätsverlust.

code
>04

Minimalistische HTML-Syntax

Ein einfaches HTML-Attribut `` genügt. Svglet kümmert sich automatisch um die Maskierung.

shield
>05

100 % DSGVO & Privacy

Vollständiges lokales Hosting der SVG-Iconset-Dateien auf Ihrem Webserver. Keine Cookie-Banner oder Datenschutzprobleme.

extension
>06

Open Source & Erweitert

Vollständig erweiterbar mit eigenen Custom-SVG-Dateien. Beliebige Icon-Sets lassen sich im Projekt hinterlegen.

Open Source Project

Saubere Web-Standards statt Icon-Müll

Mit Svglet demonstriert VeratekSoft, wie moderne Web-Tools gebaut sein sollten: Extrem leicht, hochperformant und ohne unnötigen Ballast. Wir nutzen Svglet in all unseren Kundenprojekten für minimale Ladezeiten und optimale Lighthouse-Scores.

check_circle 100 Lighthouse Performance check_circle MIT License
VeratekSoft Modular Design System Svglet
$ svglet flow

Vom HTML-Attribut zur CSS-Maske – ein durchgehender Fluss

Das Rendering-Prinzip von Svglet basiert auf nativer CSS-Maskierung und minimalem DOM-Handling.

>01
code

Attribut im HTML

Entwickler setzt ganz einfach das Attribut <i data-icon="star"> im HTML-Markup.

>02
memory

Svglet Init-Skript

Das ultraleichte Init-Skript erkennt das Element und löst den passenden SVG-Masken-Pfad auf.

>03
palette

CSS-Masken-Injektion

Das SVG wird nativ als -webkit-mask-image im Inline-Style hinterlegt.

>04
scale

CSS-Styling

Farbe (color) und Größe (width/height) werden wie gewohnt per CSS gestuert.

$ cat architecture.txt

Architektur für Performance-Enthusiasten

Svglet ist mit modernsten Web-Standards entwickelt. So funktioniert die Einbindung in Ihr Projekt.

palette

CSS Mask Specification

Nutzung von standardisiertem CSS Masking. Funktioniert in allen modernen Desktop- und Mobil-Browsern.

code

Dynamic Path Mapping

Automatisches Mappen von Icon-Namen zu lokalen SVG-Dateien im `iconPath`-Verzeichnis.

memory

DOM Mutation Observer

Erkennt dynamisch hinzugefügte Icon-Elemente bei Single-Page-Apps und AJAX-Loads.

shield

Clean Standards

Kein Font-Icon-Bleeding, kein Layout-Shift (CLS) und vollkommen frei von externen Netzwerkaufrufen.

verateksoft — produkt/svglet.js
ES Module

// 1. Svglet Modul importieren & initialisieren

import { init } from './assets/svglet/index.js';

init({ iconPath: './assets/icons' });

// 2. HTML Markup

<i data-icon="rocket-launch" class="btn-icon"></i>

// 3. CSS Styling

.btn-icon { color: #FF6600; width: 24px; height: 24px; }

✔ Fertig! Icon rendert gestochen scharf als CSS-Maske

$ verateksoft product/svglet

So setzt VeratekSoft Svglet in Kundenprojekten ein

Als eigenes Open-Source-Produkt integrieren wir Svglet in all unsere Kunden-Websites und Web-Apps für minimale Ladezeiten und perfekte Performance.

>01

Icon-Audit & Systemauswahl

Analyse des UI-Designs und Erstellung eines maßgeschneiderten, optimierten SVG-Iconsets für Ihr Corporate Design.

>02

Optimierung & SVG-Bereinigung

Kompression aller SVG-Dateien (SVGO) für minimale Dateigrößen und saubere Vektor-Maskenstrukturen.

>03

Integration in den Tech-Stack

Einbindung von Svglet in Ihr Frontend (HTML, React, Next.js, Vue oder Tailwind) ohne zusätzliche Abhängigkeiten.

>04

Theme- & Farb-Konfiguration

Anpassung der CSS-Regeln für Hover-Effekte, Dark/Light Mode Umschaltungen und flüssige Animationen.

>05

Qualitätssicherung & Performance-Release

Prüfung der PageSpeed Lighthouse-Score (100/100) und Abnahme aller barrierefreien Icon-Attribute.

$ faq --antworten

Häufige Fragen zu Svglet

Wichtige Antworten rund um das Open-Source-Icon-System von VeratekSoft.

>01

Was unterscheidet Svglet von Icon-Fonts?

expand_more

Svglet arbeitet mit echten SVG-Masken. Icons bleiben dadurch bei jeder Bildschirmauflösung gestochen scharf, sind direkt über CSS-Farben anpassbar und erzeugen keinerlei Schrift-Ladeverzögerungen (FOUT) oder Anti-Aliasing-Probleme.

>02

Ist Svglet wirklich 100% kostenlos und Open Source?

expand_more

Ja. Svglet ist ein freies Open-Source-Projekt von VeratekSoft unter MIT-Lizenz. Sie können es uneingeschränkt für persönliche und kommerzielle Webprojekte nutzen.

>03

Benötigt Svglet einen Server oder eine Datenbank?

expand_more

Nein. Svglet ist eine reine Client-Lösung. Sie lagern die benötigten SVG-Icon-Dateien einfach direkt lokal auf Ihrem eigenen Server ab – ideal für maximale Ladezeiten und DSGVO-Konformität.

>04

Kann ich eigene Custom-Icons in Svglet verwenden?

expand_more

Ja. Eigene SVG-Dateien speichern Sie einfach im definierten Icon-Ordner ab und referenzieren sie direkt im HTML-Attribut data-icon="mein-icon".

>05

Unterstützt Svglet moderne Frontend-Frameworks wie React, Vue oder Astro?

expand_more

Ja. Svglet lässt sich problemlos in modernste Stacks einbinden – da es sich um ein Standard-ES-Modul mit MutationObserver handelt, werden auch dynamisch erzeugte Komponenten automatisch erkannt.

>06

Übernimmt VeratekSoft die Einbindung in mein Webprojekt?

expand_more

Ja. Für alle von VeratekSoft entwickelten Webseiten und Applikationen binden wir Svglet standardmäßig ein, um maximale Ladezeiten, Lighthouse 100/100 Scores und DSGVO-Sicherheit zu gewährleisten.

verateksoft — produkt/svglet.sh

$ verateksoft kontakt --produkt svglet▋

// Bereit für maximale Icon-Performance in Ihrem Webprojekt?

Holen Sie maximale Icon-Performance
in Ihr Webprojekt.

Svglet wird von VeratekSoft entwickelt undgepflegt. Wir nutzen es für alle unsere Kundenprojekte – sprechen Sie mit uns über Ihre Anforderung.

message Projekt mit uns besprechen arrow_forward code GitHub Repository
check_circle Open Source Projekt von VeratekSoft check_circle MIT Lizenz frei nutzbar check_circle Antwort in 24 h