{"id":117212,"date":"2025-07-08T01:36:46","date_gmt":"2025-07-07T22:36:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/was-ist-eine-svg-datei-wie-verwendet-man-sie\/"},"modified":"2026-01-13T03:00:45","modified_gmt":"2026-01-13T01:00:45","slug":"was-ist-eine-svg-datei-wie-verwendet-man-sie","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/was-ist-eine-svg-datei-wie-verwendet-man-sie\/","title":{"rendered":"Was ist eine SVG-Datei & wie verwendet man sie?"},"content":{"rendered":"\n

Bilder sind essenziell – Sie erz\u00e4hlen Geschichten, vermitteln Emotionen und setzen den visuellen Ton Ihrer Website.\nAber nicht alle Bilder sind gleich.\nTraditionelle Formate wie JPEGs und PNGs, obwohl allgegenw\u00e4rtig, k\u00f6nnen einen erheblichen Nachteil haben: Sie verlieren an Qualit\u00e4t, wenn sie vergr\u00f6\u00dfert werden.\nHier kommen skalierbare Vektorgrafiken (SVGs) ins Spiel mit kristallklaren Vorteilen. <\/p>\n\n

SVGs bestehen nicht aus Pixeln wie traditionelle Bilder.\nStattdessen verwenden sie mathematische Formeln, um Linien, Formen und Farben zu definieren.\nDiese magische Formel bedeutet, dass ein SVG<\/a> unabh\u00e4ngig von der Gr\u00f6\u00dfe immer perfekt scharf aussieht.\nSie sind ideal f\u00fcr Logos, Symbole, Illustrationen und andere Designelemente, die auf jeder Bildschirmgr\u00f6\u00dfe perfekt aussehen m\u00fcssen.\nAu\u00dferdem haben SVGs oft unglaublich kleine Dateigr\u00f6\u00dfen, was Ihre Website schlank und schnell ladend h\u00e4lt. <\/p>\n\n

Das Potenzial von SVGs mit Elementor nutzen<\/h2>\n\n

Die Wahl der richtigen Werkzeuge ist entscheidend, um das volle Potenzial von SVGs auszusch\u00f6pfen.\nElementor, ein f\u00fchrender WordPress-Website-Builder<\/a>, bietet eine benutzerfreundliche und leistungsstarke Plattform, um SVGs nahtlos in Ihre Webprojekte zu integrieren und zu verwalten.\nEgal, ob Sie ein erfahrener Designer oder ein Anf\u00e4nger sind, Elementor vereinfacht den Prozess und hilft Ihnen, atemberaubende Websites zu erstellen, die sowohl visuell ansprechend als auch leistungsoptimiert sind. <\/p>\n\n

SVG-Grundlagen <\/h2>\n\n

Die Bausteine von SVGs<\/h3>\n\n

Wie ein digitaler Bauplan werden SVGs mit speziellem Code konstruiert, der die grundlegenden Bausteine des Bildes definiert.\nLassen Sie uns die wichtigsten Komponenten aufschl\u00fcsseln: <\/p>\n\n

Kernelemente<\/h4>\n\n
    \n
  1. Rechtecke (<\/strong><rect>):<\/strong> Definieren Sie rechteckige Formen mit Attributen wie Breite, H\u00f6he, x und y f\u00fcr die Positionierung.\nF\u00fcgen Sie abgerundete Ecken mit rx und ry hinzu. <\/li>\n\n\n\n
  2. Kreise (<\/strong><circle>):<\/strong> Erstellen Sie Kreise mit den Attributen cx und cy f\u00fcr die Mittelpunkte und dem Attribut r f\u00fcr den Radius.<\/li>\n\n\n\n
  3. Ellipsen (<\/strong><ellipse>):<\/strong> \u00c4hnlich wie Kreise, aber mit den Attributen rx und ry zur Anpassung des Radius entlang der x- und y-Achse.<\/li>\n\n\n\n
  4. Linien (<\/strong><line>):<\/strong> Zeichnen Sie gerade Linien mit Startkoordinaten (x1, y1) und Endkoordinaten (x2, y2).<\/li>\n\n\n\n
  5. Polygone (<\/strong><polygon>):<\/strong> Geben Sie eine Reihe von Punkten an, um geschlossene Formen mit beliebig vielen Seiten zu erstellen.<\/li>\n\n\n\n
  6. Pfade (<\/strong><path>):<\/strong> Das m\u00e4chtigste Element \u2013 verwenden Sie das Attribut d, um komplexe Kurven und Formen mit einer Reihe von Befehlen zu zeichnen.<\/li>\n\n\n\n
  7. Text (<\/strong><text>):<\/strong> Betten Sie Text direkt in Ihr SVG ein f\u00fcr Titel, Beschriftungen und mehr.<\/li>\n<\/ol>\n\n

    Attribute: Wichtige Modifikatoren<\/h4>\n\n
      \n
    1. fill:<\/strong> Steuert die Farbe innerhalb einer Form.\nAkzeptiert Farbnamen (rot), Hex-Codes (#FF0000), RGB-Werte (RGB(255, 0, 0)) <\/li>\n\n\n\n
    2. stroke:<\/strong> Legt die Farbe der Umrandung einer Form fest.<\/li>\n\n\n\n
    3. Stroke-width:<\/strong> Bestimmt die Dicke der Umrandung.<\/li>\n\n\n\n
    4. Opacity:<\/strong> Steuert die Transparenz eines Elements (Werte von 0 bis 1).<\/li>\n<\/ol>\n\n

      Gruppen und Transformationen<\/h4>\n\n
        \n
      1. <g> tag:<\/strong> Gruppieren Sie Elemente f\u00fcr kollektives Styling oder Transformationen.<\/li>\n\n\n\n
      2. Transform-Attribut:<\/strong> Wenden Sie Transformationen wie Drehen, Verschieben, Skalieren oder Schr\u00e4gstellen auf Elemente oder Gruppen an.<\/li>\n<\/ol>\n\n

        Beispiel: Erstellen eines einfachen SVG<\/p>\n\n

        Hier ist ein einfaches Beispiel, das zeigt, wie diese Kernelemente und Attribute zusammenkommen:<\/p>\n\n

        <svg width=“100″ height=“100″><\/em><\/p>\n\n

        <circle cx=“50″ cy=“50″ r=“40″ fill=“blue“ stroke=“black“ stroke-width=“3″ \/><\/em><\/p>\n\n

        <\/svg><\/em><\/p>\n\n

        Dieser Code erstellt einen blauen Kreis mit einer schwarzen Umrandung in der Mitte einer 100×100 Pixel gro\u00dfen SVG-Leinwand.<\/p>\n\n

        Inline-SVG vs. Externes SVG<\/h3>\n\n

        Beim Arbeiten mit SVGs auf Websites haben Sie zwei Hauptmethoden, um sie zu integrieren:<\/p>\n\n

        Inline-SVG:<\/strong><\/p>\n\n

        Der SVG-Code wird direkt in Ihr HTML-Dokument eingebettet, indem das -Tag verwendet wird.<\/p>\n\n

        Vorteile:<\/strong><\/p>\n\n