Orgelfan: SVG: Symbol auf absolute Grösse skalieren.

Hallo,

ein kompliziertes SVG-Logo besteht aus vielen einzelnen Elementen, so dass ich die genaue Abmessungen des Gesamtelements nicht auf einen Blick erkennen kann.

Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen. Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.

Wie mache ich das?

  1. Lieber Orgelfan,

    ein kompliziertes SVG-Logo besteht aus vielen einzelnen Elementen,

    geht es um "Sprites", die in einer SVG-Datei zusammengefasst sind, oder geht es um ein Logo, das immer komplett angezeigt werden soll?

    so dass ich die genaue Abmessungen des Gesamtelements nicht auf einen Blick erkennen kann.

    Die Abmessungen muss der Browser handhaben, nicht Du selbst. Daher kannst Du mit CSS dafür sorgen, dass das Element, dessen Hintergrundbild mit dem Logo gestaltet werden soll, mit der background-size-Regel entsprechend skaliert wird.

    Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen.

    Diesen Satz verstehe ich nicht.

    Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.

    Warum nennst Du als Einheit Millimeter? Nutzt Du es für Druckausgaben? Das hast Du nicht näher erläutert. Erzähle doch bitte mal wesentlich genauer, was Du vorhast!

    Liebe Grüße

    Felix Riesterer

  2. @@Orgelfan

    Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen. Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.

    Wie mache ich das?

    Vermutlich so: Du änderst <svg in <symbol id="…" und </svg> in </symbol>. Das viewBox-Attribut muss erhalten bleiben – wenn keins da ist, eins setzen. Andere möglicherweise vorhandene Attribute wie xmlns, width und height fallen weg.

    Das symbol-Element bindest du in ein svg-Element ein und kannst dann mit <use xlink:href="#…"/> darauf zugreifen.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Das Logo soll später mehrmals in verschiedenen Grössen auf einer DinA4-Seite genau positioniert ausgedruckt werden.

      Das viewbox-attribut funktioniert vermutlich nicht, denn es ist ja nicht mit "use" verwendbar, und würde ja auch nicht skalieren wenn ich das richtig verstehe, sondern allenfalls den sichtbaren Bereich beschneiden?

      Oder kann man "viewbox" mit jedem "<use ..." -Aufruf verwenden?

      1. @@Orgelfan

        Das Logo soll später mehrmals in verschiedenen Grössen auf einer DinA4-Seite genau positioniert ausgedruckt werden.

        Das viewbox-attribut funktioniert vermutlich nicht, denn es ist ja nicht mit "use" verwendbar

        Was meinst du mit „nicht mit use verwendbar“? Das viewbox-Attribut hängt nicht am use-Element, sondern am symbol-Element.

        und würde ja auch nicht skalieren wenn ich das richtig verstehe, sondern allenfalls den sichtbaren Bereich beschneiden?

        Das verstehst du nicht richtig.

        Vielleicht kannst du mit dem ersten Teil des Tutorials was anfangen.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.

          Ich will es aber später mit <use ..> ca. 20x aufrufen und dabei immer verschieden skalieren, - aber auf absolute Grössen.

          1. @@Orgelfan

            Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.

            Nein. viewBox gibt keine Größe an, sondern das Koordinatensystem.

            LLAP 🖖

            --
            „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
            „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

            —Marc-Uwe Kling
            1. @@Gunnar Bittersmann

              Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.

              Nein. viewBox gibt keine Größe an, sondern das Koordinatensystem.

              Ich hab dir mal ein Beispiel gebaut, in welchem dasselbe symbol zweimal in unterschiedlichen Größen verwendet wird.

              Die Angaben im d-Attribut des path-Elements des symbols beziehen sich auf dessen Koordinatensystem (d.h. dessen viewBox).

              Die Angaben für x, y, width, height bei den use-Elementen beziehen sich auf das Koordinatensystem des svg-Elements (d.h. dessen viewBox).

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
              1. Guck ich mir mal an.

                Was ich nicht ganz verstehe: In der Selfhtml-Erklärung zur viewbox steht, dass sich ab der Definition einer viewbox in einem symbol alles Nachfolgende im kompletten(!) svg auf diese viewbox bezieht. Wie geht das wenn ich wie in Deinem Beispiel zwei viewboxen habe?

                1. Hallo Orgelfan,

                  Was ich nicht ganz verstehe: In der Selfhtml-Erklärung zur viewbox steht, dass sich ab der Definition einer viewbox in einem symbol alles Nachfolgende im kompletten(!) svg auf diese viewbox bezieht. Wie geht das wenn ich wie in Deinem Beispiel zwei viewboxen habe?

                  Ein svg-Element kann nur ein viewBox-Attribut haben.

                  Bis demnächst
                  Matthias

                  --
                  Pantoffeltierchen haben keine Hobbys.
                  ¯\_(ツ)_/¯