Warum werden Bilder in Mails nicht angezeigt... oder doch?!?

Fast alle Webmailer haben das externe Laden von Bildern erstmal deaktiviert.
Bei uns steht dann immer einmal erlauben oder absender generell freischalten.
Da hast du wenig Einfluss drauf.

Bei einem anderem Projekt hab ich das so gemacht das das Logo im Mail Header als Base64 codiert in der Mail drinnen ist. gmail macht aber neuerdings damit Probleme.

Schau in TB in die Optionen da kannst das Einsteellen bei Privatsphäre

 

Evtl. ist etwas in den SVG Dateien. Die können ja mehr inhalte als reine vectoren enthalten.
In SVG kannst du beliebige Rastergrafiken einbinden und mit anklickbaren, aber unsichtbaren geometrischen Grundformen kombinieren. Imagemaps usw.
vermutlich ist in den SVGs irgendein Hinweis per URL auf den ersteller oder so?
Öffne sie mal und speichere sie neu ab ggf. über umweg in einem Vectorformat deines Programms wie Corel oder Afinity Designer usw. Und dann wieder in SVG. Oder schau mal obs im Netz ein Online Tool zum auslesen der SVG Inhalte gibt.

 

dann weiß ich auch nicht warum dein TB das blockiert. sry. mehr fällt mir da auch nicht mehr ein. Vielleicht mal im Forum bei denen fragen?

 

Warum funktioniert das WhatsApp SVG und die anderen nicht?

Das ist ein sehr häufiges Problem mit SVGs, besonders wenn sie in

Code:

<img>

-Tags oder in E-Mail-Clients verwendet werden!

Der Hauptgrund, warum dein WhatsApp-SVG funktioniert und die Facebook- und Instagram-SVGs wahrscheinlich nicht (oder nicht wie erwartet) angezeigt werden, liegt darin, wie die Farben innerhalb der SVG-Dateien definiert sind.

Kurz gesagt:

• WhatsApp-SVG: Diese Datei enthält wahrscheinlich eine explizite Farbfüllung für die Pfade, aus denen das Logo besteht.
• Facebook- & Instagram-SVGs: Diese Dateien verlassen sich möglicherweise darauf, dass die Füllfarbe von der übergeordneten CSS-Umgebung geerbt wird (z. B. durch
  Code:

  fill="currentColor"

  oder gar keine Füllungsangabe, was oft zu Schwarz oder Transparent führt). Wenn sie in einem
  Code:

  <img>

  -Tag verwendet werden, ist diese Vererbung oft blockiert oder funktioniert nicht zuverlässig, insbesondere in E-Mail-Clients.

Im Detail:

1. WhatsApp SVG (funktioniert):
Wenn wir uns den Code deines

Code:

icon-whatsapp.svg.txt

ansehen (Ausschnitt):

Code:

...
<path d="M752.279,1134.18c-247.542,0 -448.847,201.305 -448.95,448.717c-0.052,84.781 23.687,167.366 68.603,238.814l10.666,16.982l-45.33,165.606l169.851,-44.551l16.388,9.732c68.913,40.877 147.895,62.521 228.407,62.545l0.181,0c247.556,0 539.792,-242.209 539.894,-539.894c0.051,-144.271 -56.048,-279.9 -157.994,-381.95l-0,-0.026Z" style="fill:#40c351;fill-rule:nonzero;"/>
<path d="M597.469,501.414c30.282,-0.025 60.026,5.818 88.408,17.115c28.381,11.297 54.847,26.561 78.674,45.234c23.826,18.672 44.713,40.577 62.051,64.991c17.338,24.413 30.915,51.026 40.262,79.123c9.346,28.097 14.373,57.414 14.939,86.976c0.565,29.562 -3.314,58.943 -11.483,86.899c-8.168,27.956 -20.523,54.264 -36.662,78.146c-16.14,23.882 -35.883,45.085 -58.678,62.977c-22.795,17.892 -48.428,32.297 -76.145,42.754c-27.718,10.457 -57.158,16.821 -87.049,18.823c-29.891,2.002 -59.979,-0.285 -89.156,-6.776c-29.177,-6.492 -57.146,-17.099 -82.992,-31.447l-148.338,38.902l39.73,-144.597c-23.199,-28.391 -41.723,-60.057 -54.787,-93.808c-13.064,-33.752 -20.488,-69.216 -21.953,-105.003c-1.465,-35.787 3.087,-71.4 13.436,-105.15c10.35,-33.752 26.329,-65.108 47.286,-92.966c20.957,-27.858 46.619,-51.891 75.966,-71.173c29.348,-19.282 61.866,-33.565 96.257,-42.302Z" style="fill:#fff;fill-rule:nonzero;"/>
...

Beachte das

Code:

style="fill:#40c351;"

und

Code:

style="fill:#fff;"

. Diese Pfade haben explizit definierte Füllfarben (Grün und Weiß). Das SVG ist in sich geschlossen und "weiß", wie es aussehen soll.

2. Facebook SVG (funktioniert wahrscheinlich nicht richtig):
Ausschnitt aus

Code:

icon-facebook.txt

:

Code:

...
<g id="Logo">
    <path d="M2500,1458.33c0,-575.296 -466.371,-1041.67 -1041.67,-1041.67c-575.296,-0 -1041.67,466.37 -1041.67,1041.67c-0,488.521 336.312,898.425 790.025,1010.99l-0,-692.675l-214.8,0l-0,-318.317l214.8,0l-0,-137.162c-0,-228.027 152.138,-373.614 384.021,-373.614l255.962,-0l-0,283.05l-164.844,0c-84.861,-0 -94.968,31.361 -94.968,90.112l-0,137.614l260.438,-0l-29.458,318.317l-230.98,0l-0,692.675c453.713,-112.565 790.025,-522.469 790.025,-1010.99Z"/>
</g>
...

Hier fehlt beim

Code:

<path>

-Element eine direkte

Code:

fill

-Angabe. Das bedeutet:

• Es könnte
  Code:

  fill="currentColor"

  annehmen, was die Textfarbe des umgebenden HTML-Elements wäre. Wenn dein Text weiß ist und der Hintergrund auch, siehst du nichts.
• Es könnte standardmäßig schwarz gefüllt werden.
• Es könnte transparent sein.

In einem

Code:

<img>

-Tag ist

Code:

currentColor

oft nicht zuverlässig oder wird als Schwarz interpretiert.

3. Instagram SVG (funktioniert wahrscheinlich nicht richtig):
Ausschnitt aus

Code:

icon-instagram.svg.txt

:

Code:

...
<g clip-path="url(#_clip1)">
    <path d="M8336.74,3012.99c201.928,78.494 345.909,172.072 497.224,323.388c151.281,151.315 245.066,295.331 323.422,497.258c60.324,153.562 90.62,310.71 111.89,534.669c22.855,239.059 27.145,314.805 27.145,938.885c0,623.99 -4.29,700.004 -27.145,939.112c-21.27,223.959 -51.566,381.04 -111.89,534.477c-78.356,201.927 -172.141,345.943 -323.422,497.258c-151.315,151.315 -295.296,244.893 -497.224,323.387c-153.63,60.289 -310.676,90.517 -534.571,111.822c-239.051,22.822 -314.704,27.111 -938.755,27.111c-624.051,0 -700.007,-4.289 -939.116,-27.111c-223.895,-21.305 -380.909,-51.533 -534.537,-111.822c-201.962,-78.494 -345.978,-172.072 -497.293,-323.387c-151.315,-151.315 -245.029,-295.331 -323.388,-497.258c-60.323,-153.437 -90.583,-310.518 -111.89,-534.477c-22.821,-239.108 -27.112,-315.122 -27.112,-939.112c0,-624.08 4.291,-699.826 27.112,-938.885c21.307,-223.959 51.567,-381.107 111.89,-534.669c78.359,-201.928 172.175,-345.909 323.388,-497.224c151.315,-151.316 295.331,-245.066 497.293,-323.388c153.628,-60.358 310.642,-90.686 534.537,-111.956c239.109,-22.821 315.065,-27.145 939.116,-27.145c624.05,0 699.695,4.324 938.755,27.145Z"/>
    <path d="M6060.1,4173.57c-1041.45,0 -1886.53,845.081 -1886.53,1886.53c0,1041.45 845.081,1886.53 1886.53,1886.53c1041.45,0 1886.53,-845.081 1886.53,-1886.53c0,-1041.45 -845.08,-1886.53 -1886.53,-1886.53Zm0,3409.01c-840.148,0 -1522.48,-682.331 -1522.48,-1522.48c0,-840.148 682.331,-1522.48 1522.48,-1522.48c840.148,0 1522.48,682.331 1522.48,1522.48c0,840.148 -682.331,1522.48 -1522.48,1522.48Z"/>
    <path d="M9061.61,4004.25c-247.75,0 -448.584,-200.834 -448.584,-448.584c0,-247.75 200.834,-448.584 448.584,-448.584c247.75,0 448.584,200.834 448.584,448.584c0,247.75 -200.834,448.584 -448.584,448.584Z"/>
</g>
...

Ähnlich wie beim Facebook-Icon haben die Pfade hier keine explizite

Code:

fill

-Farbe.

Lösungsansätze:

1. SVGs bearbeiten (empfohlen für E-Mails):
Der zuverlässigste Weg, insbesondere für E-Mails, ist, die SVG-Dateien für Facebook und Instagram so zu bearbeiten, dass die Pfade, die das Logo bilden, eine explizite

Code:

fill

-Farbe erhalten.

• Für Facebook: Füge dem
  Code:

  <path>

  -Element ein
  Code:

  fill

  -Attribut hinzu, z.B.
  Code:

  fill="#3b5998"

  (das ist ein typischer Facebook-Blauton).
  
  Code:

  <path d="M2500,1458.33c0,-575.296..." fill="#3b5998"/>
  

• Für Instagram: Das ist etwas komplexer, da das Instagram-Logo typischerweise einen Farbverlauf hat. Du müsstest entweder:
  • Einen soliden Fallback-Farbton verwenden (z.B.
    Code:

    fill="#C13584"

    oder einen der Hauptfarbtöne des Verlaufs).
  • Sicherstellen, dass die Verlaufsdefinitionen (
    Code:

    <linearGradient>

    ,
    Code:

    <radialGradient>

    ) korrekt im SVG enthalten sind und die Pfade korrekt auf diese Verlaufs-IDs verweisen (z.B.
    Code:

    fill="url(#meinVerlauf)"

    ). Dies kann in E-Mail-Clients immer noch problematisch sein. Eine einzelne, solide Farbe ist sicherer.

2. Inline-SVGs (für Webseiten, weniger für E-Mails):
Wenn dies für eine Webseite und nicht primär für E-Mails wäre, könntest du die SVGs direkt in den HTML-Code einbetten:

HTML:

<td align="center">
    <a href="https://fb.com/matchashop.de" target="_blank" style="color: #3b5998;"> <svg width="48" height="48" viewBox="0 0 2917 2917" ... style="fill: currentColor;"> <g id="Logo">
                <path d="M2500,1458.33c0,-575.296 ... Z"/>
            </g>
        </svg><br />
        Facebook
    </a>
</td>

Mit

Code:

style="fill: currentColor;"

im SVG würde es die Farbe vom

Code:

<a>

-Tag erben. Aber Vorsicht: Inline-SVGs haben sehr schlechte Unterstützung in vielen E-Mail-Clients (besonders Outlook).

Empfehlung für deinen Anwendungsfall (E-Mail-Signatur/HTML-E-Mail):

Bearbeite die

Code:

icon-facebook.svg

und

Code:

icon-instagram.svg

Dateien und füge den relevanten

Code:

<path>

-Elementen ein explizites

Code:

fill

-Attribut mit der gewünschten Markenfarbe hinzu. Lade dann die geänderten SVGs auf deinen Server hoch. Dies ist die robusteste Methode, um sicherzustellen, dass sie in den meisten Umgebungen, einschließlich E-Mail-Clients, die SVGs in

Code:

<img>

-Tags unterstützen, korrekt angezeigt werden.

Du kannst die SVGs mit einem Texteditor ode
r einem Vektorgrafikprogramm wie Inkscape (kostenlos) oder Adobe Illustrator bearbeiten.

 

Die Frage ist, welchen konkreten Benefit eine svg-Datei bei dieser Anwendung (Email) bringt. Die verlustfreie Skalierbarkeit spielt hier keine Rolle. Einen anderen Vorteil sehe ich nicht. Insofern würden es problemlos kleine jpg-Dateien tun.

Gruß
Christian

 

Achja, die meisten haben auch gesagt, das man PNG nutzen sollte bei Mails da es noch diverse Mailclints gibt die SVGs nicht verarbeiten können. Etwa 92% Kompatibilität klingt zwar viel aber gerade die 8% die nicht funktionieren sind ca 30-35 % der User meinte einer, daher in Mail Templates bei altbewährtem bleiben.