Direkt im HTML-Code eingebundene SVG verändert die Größe der Nav

    Hallo zusammen,


    wie schon aus dem Titel hervorgeht, habe ich Probleme mit einem SVG Menu-Button. Diesen habe ich direkt im HTML-Code eingefügt.


    HTML
    <div id="navbar">
        <a href="#navMenu_open" class="menu-button show-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
        <a href="#navMenu_close" class="menu-button hide-navMenu"><svg xmlns="http://www.w3.org/2000/svg"><g style="fill:none;stroke-width:1;stroke:none"><path d="M1.5 6C1.2 6 1 6.2 1 6.5L1 7.5C1 7.8 1.2 8 1.5 8L22.5 8C22.8 8 23 7.8 23 7.5L23 6.5C23 6.2 22.8 6 22.5 6L1.5 6ZM1.5 11C1.2 11 1 11.2 1 11.5L1 12.5C1 12.8 1.2 13 1.5 13L22.5 13C22.8 13 23 12.8 23 12.5L23 11.5C23 11.2 22.8 11 22.5 11L1.5 11ZM1.5 16C1.2 16 1 16.2 1 16.5L1 17.5C1 17.8 1.2 18 1.5 18L22.5 18C22.8 18 23 17.8 23 17.5L23 16.5C23 16.2 22.8 16 22.5 16L1.5 16Z" fill="#000"/></g></svg></a>
    </div>


    Erst mal funktioniert alles. Der Button ist zu sehen und auch die Farbe konnte ich per CSS ändern.


    Eine Sache bekomme ich jedoch nicht gelöst. Und zwar scheint die SVG irgendwie die Größe der Navbar bzw. der Menu-Buttons zu beeinflussen.


    Hier mal der vermutlich relevante CSS-Code:



    Und ein Screenshot:


    [Blockierte Grafik: http://fs5.directupload.net/images/160313/vxemwr8g.png]



    Falls ihr noch mehr Code braucht, gebt mir Bescheid oder schaut hier vorbei. Der Code dort sollte auch noch halbwegs aktuell sein, da nur die Teile, die ich hier gepostet habe, verändert sind.


    Wenn nötig, kann ich den aktuellen Stand auch auf meine Website hochladen.



    So, schon mal vielen Dank im Voraus. :)


    Gruß
    JR Cologne

    Hallo


    Zitat

    Und zwar scheint die SVG irgendwie die Größe der Navbar bzw. der Menu-Buttons zu beeinflussen.


    Das ganz normale Verhalten.


    Da der SVG keine Größenangaben mit auf den Weg gegeben wurden erhält sie eine vom Browser vorgegebene Standardgröße. Genau wie andere Elemente auch.


    Guter Stil bei SVG ist, der SVG eine Größe zu geben und dabei keinen Abstand zum Inhalt der SVG aufkommen zu lassen. Wie bei jeder anderen Grafik auch.


    Gruss


    MrMurphy

    Wieso überhaupt diese unkontrollierbaren % werte???
    Mach doch einfach eine Feste Höhe, im allgemeinen empfiehlt es sich mit festen Pixelwerten zu arbeiten, ausnahmen sind Box Breiten die sich am Bildschirm orientieren und Schriftgrößen..

    Ja, klar. Das könnte ich machen, aber ich hätte es halt gerne in Prozent. :P:D


    Normalerweise klappt das ja auch ganz gut, nur jetzt eben nicht.


    Gibt es also eine Möglichkeit das mit Prozentwerten zu machen oder nicht?


    Wenn nicht, mach ich es mit em. :D

    Wieso mit % oder em. Sorry aber das ist unglaublicher Schwachsinn. Der Menü button wird immer 40x40 px gros sein, da muss nix in % hin. Und % müssen sich immer auf was beziehen können, also muss die Elternbox eine Feste Höhe haben oder ebenfalls eine in % angegebene höhe haben. Die Einheit em ist die Schriftgröße und Browserabhängig per default, also wirklich kein verlässlicher Wert.. gewöhn dir das ab..

    Wie? Dann habe ich da was falsch verstanden. Ich dachte, das besondere an SVG ist, dass es sich eben ohne Probleme skalieren lässt.
    Das wäre dann ja nicht mehr der Fall, wenn es immer eine bestimmte Größe, wie z.B. 40x40px, hätte.


    Das mit der Höhe und den Prozentwerten ist mir klar, nur hätte es ja auch eine andere Lösung geben können.


    Zu em: Die Browserabhängigkeit von em ist mir ebenfalls bekannt, aber ich denke nicht, dass jeder Browser da groß einen anderen Standard hat. Wenn handelt es sich um wenige Pixel. Die meisten haben wohl 16px als Standard.
    Wobei man sagen muss, ob man jetzt px oder em einsetzt, macht jetzt auch keinen großen Unterschied. Von daher nehme ich dann meinetwegen auch Pixel, falls es wirklich keine Lösung gibt.

    Hallo


    Zitat

    Dann habe ich da was falsch verstanden.


    Stimmt.


    Du versuchst offensichtlich sinnvolle Vorgehensweisen von HTML / CSS auf SVG zu übertragen. Davon musst du dich lösen, da SVG anders funktionieren als eine Webseite.


    Zitat

    Von daher nehme ich dann meinetwegen auch Pixel, falls es wirklich keine Lösung gibt.


    Am sinnvollsten ist es SVG mit Pixel zu erstellen. Und zwar wie schon von mir geschrieben ohne einen Rahmen / Abstand.


    Andere Einheiten sind zwar zulässig, aber sollten nur in speziellen Ausnahmefällen verwendet werden.


    Zitat

    Ich dachte, das besondere an SVG ist, dass es sich eben ohne Probleme skalieren lässt.


    Stimmt. Im Gegensatz zu Pixelgrafiken lassen sich Vektorgrafiken, zu denen auch SVG gehören, ohne Qualitätsverlust vergrößern und verkleinern. Und zwar auch wenn sie intern mit der Einheit px erstellt wurden. Hier liegt wahrscheinlich dein Denkfehler. Du erwartest, dass sich mit px erstellte SVG ähnlich starr wie HTML-Elemente verhalten. Dem ist aber nicht so.


    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden