Logo wird im Firefox Browser nicht ganz angezeigt

    Hi Leute,

    bin gerade etwas verwirrt. Ich erstelle gerade eine Site für einen Bekannten und als ich die Seite in allen Browsern testen will sehe ich dass das Logo oben links nicht ganz angezeigt wird. Es ist ne svg Datei die ich selbst in Canva gebastelt hab. Ein runder Baumstumpf und der Name des Tischlers. http://www.gelinek.at

    Jemand eine Idee was da los ist?
    Hab das Bild als Site Logo definiert.

    Wäre für jeglichen Input dankbar...

    Lieben Gruß

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Kleine Ergänzung. Wenn ich ne andere SVG reingeb (Nur das Icon - also den Holzblock allein) funktioniert es. Habe schnell ne neue erstellt. Die wollte er auch nicht. Wieso ist das so? Jm ne Erklärung? Normal sollte es so aussehen...

    Versuche es testweise mit einer .[FONT=Courier New]png[/FONT] Datei, evtl. ist Deine [FONT=Courier New].svg[/FONT] Datei defekt oder sonstige CSS Regeln für [FONT=Courier New]img[src$=".svg"][/FONT] u.ä. funken dazwischen.

    Zitat von styrishgirl

    Jm ne Erklärung? Normal sollte es so aussehen...


    Dein Logo ist im HTML Code extrem groß mit width="1650" height="749

    Code
    <img width="1650" height="749" src="https://www.gelinek.at/wp-content/uploads/2023/05/Logo-Tischlerei-Gelinek-Beige-mit-Schwarz-ohne-HG-svg.svg" class="attachment-full size-full wp-image-58 astra-logo-svg" alt="" loading="lazy" srcset="" />

    [COLOR=#b30000]srcset=""[/COLOR] ist hier falsch
    sagt
    https://validator.w3.org/nu/?showsource…w.gelinek.at%2F

    verwende für ein Logo bitte kein PNG Format . PNG ist "veraltet" ;)

    deine SVG kann der Broswer darstellen aber die SVG Grafik hat Fehler

    https://validator.w3.org/nu/?showsource…ohne-HG-svg.svg

    Mit offenen Augen träumen

    Zitat von r23


    deine SVG kann der Broswer darstellen aber die SVG Grafik hat Fehler

    https://validator.w3.org/nu/?showsource=yes&showimagereport=yes&doc=https://www.gelinek.at/wp-content/uploads/2023/05/Logo-Tischlerei-Gelinek-Beige-mit-Schwarz-ohne-HG-svg.svg

    Ja er sagt kein Image im document und genau so zeigt er es auch an. Ohne Bild. wenn man den Tab allein öffnet wird es angezeigt, aber auch nicht ganz. Irgendwas fehlt immer.

    Zitat von r23

    erwende für ein Logo bitte kein PNG Format . PNG ist "veraltet" ;)

    Ja das gilt es eben zu vermeiden...o_O

    Preisfrage - woran liegt es wenn SVG Dateien fehlerhaft abgespeichert werde? Was muss man hierbei beachten? Ich kann mir nämlich gar nicht erklären wieso sie fehlerhaft abgespeichert werden...:(

    Zitat von styrishgirl

    Ja er sagt kein Image im document und genau so zeigt er es auch an. Ohne Bild. wenn man den Tab allein öffnet wird es angezeigt, aber auch nicht ganz. Irgendwas fehlt immer.

    deine Grafik ist noch immer sehr groß
    width="450" height="225

    https://validator.w3.org/nu/?showsource…k-svg-beige.svg

    Wenn man in den Stlee

    Code
    .elementor-310 .elementor-element.elementor-element-3927211e img {
  width: 1000px;
  max-width: 257px;
  height: 113px;
  object-fit: contain;
}


    auf max-width: 257px und / oder height: 113px; verzichtet, wird die SVG grafik "richtiger" angezeigt... zumindest bei mir...


    Zitat von styrishgirl


    Preisfrage - woran liegt es wenn SVG Dateien fehlerhaft abgespeichert werde? Was muss man hierbei beachten? Ich kann mir nämlich gar nicht erklären wieso sie fehlerhaft abgespeichert werden...:(


    du verwendest ein sehr alte svg Version. 1.0....


    Anderes Programm verwenden?

    Welche Änderungen an WordPress hast du unternommen,damit WordPress SVG kann?

    zum Beispiel
    Wie man die WordPress SVG-Unterstützung sicher aktiviert (2 einfache Klicks) (kinsta.com)

    Mit offenen Augen träumen

    Bing Chat:

    Es gibt mehrere Plugins, die du verwenden kannst, um WordPress SVG Unterstützung zu ermöglichen. Einige beliebte Optionen sind:

    - **SVG Support**¹: Dieses Plugin erlaubt dir, SVG Dateien in deine Mediathek hochzuladen und sie wie andere Bilder zu verwenden. Du kannst auch eine CSS-Klasse definieren, um deine SVG Dateien inline zu rendern und mit CSS oder JS zu stylen oder zu animieren.
    - **WP SVG Images**³: Dieses Plugin erlaubt dir auch, SVG Dateien in deine Mediathek hochzuladen, aber es sanitisiert sie auch, um mögliche Schadcode zu entfernen. Du kannst auch festlegen, welche Benutzerrollen SVG Dateien hochladen dürfen.
    - **Safe SVG**: Dieses Plugin erlaubt dir ebenfalls, SVG Dateien in deine Mediathek hochzuladen und sie mit dem WordPress Bildeditor zu bearbeiten. Es verwendet die Sanitization-Bibliothek von WordPress.com, um die Sicherheit deiner SVG Dateien zu gewährleisten.

    Alle diese Plugins sind kostenlos und einfach zu installieren und zu konfigurieren. Du kannst das Plugin wählen, das am besten zu deinen Bedürfnissen passt.

    Quelle: Unterhaltung mit Bing, 17.5.2023
    (1) SVG Support – WordPress plugin | WordPress.org. https://wordpress.org/plugins/svg-support/.
    (2) WP SVG Images – WordPress-Plugin | WordPress.org Deutsch. https://de.wordpress.org/plugins/wp-svg-images/.
    (3) How to Add SVG Image Files in WordPress (3 Simple Solutions) - WPBeginner. https://www.wpbeginner.com/wp-tutorials/h…g-in-wordpress/.

    Mit offenen Augen träumen

    svg support ist in elementor inkl. und bedarf keines extra plugins.

    nein, ich gebe keinen support per pm. wenn du ein problem hast, stelle eine öffentliche frage ins forum.

    Zitat von r23

    Bing Chat:

    Es gibt mehrere Plugins, die du verwenden kannst, um WordPress SVG Unterstützung zu ermöglichen. Einige beliebte Optionen sind:

    - **SVG Support**¹: Dieses Plugin erlaubt dir, SVG Dateien in deine Mediathek hochzuladen und sie wie andere Bilder zu verwenden. Du kannst auch eine CSS-Klasse definieren, um deine SVG Dateien inline zu rendern und mit CSS oder JS zu stylen oder zu animieren.
    - **WP SVG Images**³: Dieses Plugin erlaubt dir auch, SVG Dateien in deine Mediathek hochzuladen, aber es sanitisiert sie auch, um mögliche Schadcode zu entfernen. Du kannst auch festlegen, welche Benutzerrollen SVG Dateien hochladen dürfen.
    - **Safe SVG**: Dieses Plugin erlaubt dir ebenfalls, SVG Dateien in deine Mediathek hochzuladen und sie mit dem WordPress Bildeditor zu bearbeiten. Es verwendet die Sanitization-Bibliothek von WordPress.com, um die Sicherheit deiner SVG Dateien zu gewährleisten.

    Alle diese Plugins sind kostenlos und einfach zu installieren und zu konfigurieren. Du kannst das Plugin wählen, das am besten zu deinen Bedürfnissen passt.

    Quelle: Unterhaltung mit Bing, 17.5.2023
    (1) SVG Support – WordPress plugin | WordPress.org. https://wordpress.org/plugins/svg-support/.
    (2) WP SVG Images – WordPress-Plugin | WordPress.org Deutsch. https://de.wordpress.org/plugins/wp-svg-images/.
    (3) How to Add SVG Image Files in WordPress (3 Simple Solutions) - WPBeginner. https://www.wpbeginner.com/wp-tutorials/h…g-in-wordpress/.


    Ich dank dir vielmals dass du dich meiner angenommen hast. Ich konnte das Problem anscheinend lösen. Hab jetzt ewig am Logo herumgebastelt. Varianten probiert und bin dann zum Schluss gekommen, dass es am Baumstumpf liegt. Den habe ich zuvor selbst halbiert und als png abgespeichert und erneut eingefügt. Und das hat ihn gestört. Hab den Stumpf nun als SVG eingesetzt und siehe da...dieses Logo akzeptiert er nun in Firefox auch. Wobei im SVG Checker (danke auch für den Tipp...da gibts noch immer Error Meldungen. Kann man die ignorieren? o_O

    Ich verwende übrigens eh Safe Svg

    ich kann dein svg in ele uploaden. aber wenns bei dir nicht funzt und du den fehler nicht findest dann musst du halt ein extra plugin nehmen.

    nein, ich gebe keinen support per pm. wenn du ein problem hast, stelle eine öffentliche frage ins forum.

    Zitat von DummyGirl

    ich kann dein svg in ele uploaden. aber wenns bei dir nicht funzt und du den fehler nicht findest dann musst du halt ein extra plugin nehmen.


    Das ist wirklich komisch

    Zitat von b3317133

    Evtl. ist in den Elementor Einstellungen Enable SVG Uploads nicht aktiv.


    Leider - ist aktiv (siehe screenshot) Geht nur mit plugin.

    Vielleicht bei der nächsten Website :)

    Danke aber an alle für eure Hilfe. Ich bin froh dass es Firefox nun anzeigt....

    Zitat von styrishgirl


    Leider - ist aktiv (siehe screenshot) Geht nur mit plugin.

    Schon aus Sicherheitsgründen solltest du ein SVG Plugin verwenden. Dein Plugin verwendet die Sanitization-Bibliothek von WordPress.com, um die Sicherheit deiner SVG Dateien zu gewährleisten.

    Dies ist per se sinnvoll und darauf würde ich nicht verzichten.

    Die aktuellen SVG Versionen werden in dem Wikipedia Artikel kurz besprochen
    https://de.wikipedia.org/wiki/Scalable_Vector_Graphics

    Ich würde 1.2 verwenden
    https://www.w3.org/TR/2008/REC-SVGTiny12-20081222/

    SVG Support hat
    https://xmlgraphics.apache.org/batik/dev/svg12.html

    Inkscape unterstützt sogar die Darstellung von SVG-Eigenschaften, die noch nicht offiziell Teil des Standards sind, aber einen stabilen Zustand im Entwurf der SVG-Arbeitsgruppe für SVG 2.0 erreicht haben. Dazu gehören gestrichelte Muster, die Füll-/Kontur-Malreihenfolge und CSS-Mischmodi

    Zitat von styrishgirl


    Vielleicht bei der nächsten Website

    vielleicht...

    Mit offenen Augen träumen

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden