HTML Ein völlig valides SVG manuell erstellen?

[kali-hi]

Nabend,

ist es möglich, ein absolut valides SVG manuell zu erstellen - ohne dafür 100 € für einen teuren Service auszugeben?

Aktuell nutze ich den https://validator.w3.org/ - dieser kann jedoch nur bis Version 1.1 prüfen, Gmail und Andere verlangen jedoch Version 1.2 ...

Auf unterschiedlichen Seiten habe ich bislang folgende Hinweise erhalten:

• das Ding sei nicht quadratisch (viewBox)
• width und height fehlen
• version, profile und title seien falsch
• anstatt title setzt Version 1.2 nun auf desc
• Element path ist noch nicht erlaubt
• das EOL muss LF sein
• eine Zertifizierung fehlt (so ein Cert ... kostet leider auch viel 💰)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  height="48px"
  viewBox="0 -960 960 960"
  width="48px"
  fill="#75FB4C"
  version="1.1"
  baseProfile="tiny">
    <path d="M294-242 70-466l43-43 181 181 43 43-43 43Zm170 0L240-466l43-43 181 181 384-384 43 43-427 427Zm0-170-43-43 257-257 43 43-257 257Z">
      <title>All done path</title>
    </path>
</svg>

Ich würde mich freuen, wenn das ginge ... Also, dass anstatt des Anfangbuchstabens dann dieses schöne SVG in E-Mails also Logo angezeigt würde ... (ohne einen großen 💰 dafür zu bezahlen)

 

[kieleich]

Also, dass anstatt des Anfangbuchstabens dann dieses schöne SVG in E-Mails also Logo angezeigt würde

hier fehlt irgendwie der kontext

svg weiss nix von mail also ist das genau wurst

manche programme mögen keine komischen viewboxen (also "0 -960 ..." statt "0 0 960 960") oder diese mouseover texte, aber ohne details kann man nur raten woran es scheitert

funktionieren andere dateien denn?

oder das hier

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#75fb4c"><path d="M13 38 0 25l3-3 13 13Zm10 0L10 25l2-3 11 11 22-23 3 3zm0-10-2-3 15-15 2 3z"/></svg>

bzw

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48" fill="#75fb4c"><path d="M13 38 0 25l3-3 13 13Zm10 0L10 25l2-3 11 11 22-23 3 3zm0-10-2-3 15-15 2 3z"/></svg>

 

[kali-hi]

svg weiss nix von mail also ist das genau wurst

Ok, fangen wir bei Adam Eva an...

bei meinem Hoster ist folgender TXT DNS Record eingetragen:

"v=BIMI1; l=https://mylogourl.svg"

(neben v und l gibt es noch a=, für das Zertifikat ...)

Gmail liest bei E-Mail-Eingang diesen Eintrag und stellt dann das Logo dar - natürlich nur, wenn auch alle Vorgaben (von Gmail) erfüllt worden sind.

funktionieren andere dateien denn?

Browser haben mit dem SVG gar keine Probleme... es ist nur nicht zu 100% standard-konform... (glaube ich)

 

[kieleich]

Joa dann wörs halt gescheider gewesen du schreibst den bimi krams in den Titel

bimi-checker.org scheint das komplett abzudecken. erzeugt die richtigen dns records. korrigiert svg dateien.

ob das vertrauenswürdig ist kann ich nicht beurteilen

 

[kali-hi]

bimi-checker.org

Danke, da bin ich bei der Suche anfangs nicht drauf gestoßen...

Error detected
Certificate is missing. Consider purchasing a VMC certificate for stronger brand validation and protection.

Es fehlt also noch ein VMC Certificate (und das kostet...)

Ergänzung (29. September 2025)

gescheider gewesen du schreibst den bimi krams in den Titel

Das BIMI "Protokoll" IST im Grunde aber nichts anderes als eine SVG (in einem bestimmten Format)...

Ergänzung (29. September 2025)

erzeugt die richtigen dns records.

Aber kein Cert...

 

[kieleich]

wenns so einfach wäre würdens alle machen und dann wärs genau wieder nutzlos

selbst wenn du das alles machst - es sieht nur ein bruchteil

mein mailclient zeigt so nen quatsch nicht an. stell dir mal vor der würde von deinem webserver erst ein svg laden wenn ich ne mail von dir bekomme. dann wär das svg auch nichts, anderes als ein tracking pixel, letztendlich

 

[kali-hi]

selbst wenn du das alles machst - es sieht nur ein bruchteil

ja, schon klar... aber ich fand das halt etwas besser als nur den langweiligen Anfangbuchstaben der domain...

aber es ist auch nix, wofür ich geld ausgeben möchte... thema kann glaube ich als gelöst betrachtet werden inzwischen

 

[kieleich]

geld ist da noch das kleinste problem. du musst ja nachweisen dass es "dein" logo ist

 

[kali-hi]

ja, und es ist glaube ich nur firmen/companies vorbehalten, also nicht einzelpersonen/individuals ... Kapitalismus halt

 

[netzgestaltung]

die einzige art, ein bild(chen) sicher in emails zu versenden ist gut und alt <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
wie auch immer. die ganzen webmail ansichten schneiden sowieso beliebig inhalte aus emails raus, da gibts keine chance auf konsistenz.

hier gibts einen artikel, wie das auch mit SVG funktioniert:
https://www.campaignmonitor.com/blo...mation-svg-masks-web-fonts-panics-newsletter/

Hier hab ich mal was zu Bimi gefunden... naja... holen die mail apps sich die anderen bildchen von privaten accounts via kontakt-daten nehm ich an. Früher wurden da ja so visitenkarten-files (vcs?) durchgeschickt für den Effekt.
https://www.campaignmonitor.com/blo...mation-svg-masks-web-fonts-panics-newsletter/

 

[kali-hi]

es geht nicht um in e-mails eingebettete bildchen, sondern nur darum, dass ein "schönes" favicon/logo als absender angezeigt würde... aber ich sehe schon, aus sicherheitstechnischer sicht ist das wohl (ohne ein vmc cert) problematisch

 

[simpsonsfan]

Hast du https://easydmarc.com/blog/how-to-convert-an-image-to-svg-for-bimi/#convert-company-logo-to-svg gesehen?
Das Converter Tool für SVG Tiny P/S, das dort angeboten wird macht derweil aus deinem initialen SVG, wie gefordert in Inkscape als optmiertes SVG (dürfte dann Tiny SVG sein) zwischengespeichert, das Folgende:

<?xml version="1.0" encoding="utf-8"?>
<svg width="48px" height="48px" fill="#75FB4C" version="1.2" viewBox="0 -960 960 960" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg">
  <title>CompanyName</title>
  <path d="m294-242-224-224 43-43 224 224-43 43zm170 0-224-224 43-43 181 181 384-384 43 43-427 427zm0-170-43-43 257-257 43 43-257 257z">
    <title>All done path</title>
  </path>
</svg>

Der gravierendste Fehler dürfte im Übrigen sein, dass in deiner Datei in Zeile 7 version = 1.1 steht. Tiny SVG P/S muss da 1.2 stehen haben., da es auf Tiny SVG 1.2 basiert.

 

[kali-hi]

@simpsonsfan Ich danke dir... Habe das 1:1 übernommen (company angepasst) und nun ist alles richtig.

Einzig Gmail spielt noch nicht mit... Entweder, es fehlen noch Anforderungen - oder Gmail schaut einfach nur "stumpf" nach "mydomain.tld/favicon.ico" oder so ...

Na gut, Thema erst mal ✅

 

[netzgestaltung]

mit gimp lassen sich multiresolution .ico bauen, ist zwar weniger sexy als svg, geht aber auch: https://www.logikfabrik.se/blog/how-to-create-a-multisize-favicon-using-gimp/ geht zb bis 512x512 und man spart sich irgendwelche apple-icons die sonst noch dazu kommen.

 

[BeBur]

Noch ein Ansatz: Die Formate sind als xml definiert. Die eigene Datei kann man dagegen matchen. Das Python paket svgcheck scheint genau das zu machen.

 

[oiisamiio]

Übrigens verbannt Microsoft SVG künftig aus Outlook:
https://winfuture.de/news,154037.html

 

[kali-hi]

Übrigens verbannt Microsoft SVG künftig aus Outlook

Was kommt dann als Ersatz?

 

[oiisamiio]

Es tut mir leid, ich denke SVG wird ersatzlos gestrichen...

Aber gibt es nicht alternativen wie gif oder andere Bildformate?

 

[kali-hi]

ich denke SVG wird ersatzlos gestrichen

Sicher, hier keiner Finte aufzusitzen? ... Na ja, für mich ist das inzwischen auch nix lebensnotwendiges...

 

[simpsonsfan]

Übrigens verbannt Microsoft SVG künftig aus Outlook

Im darunter verlinkten Winfuture-Artikel steht, dass Inline-SVG in Mails nicht angezeigt werden. Das bedeutet nicht, dass angehängte SVGs nicht angezeigt werden können. Und mit dem im Thread thematisierten BIMI hat das erstmal nichts am Hut
Genauso, wie die Erstellung eines völlig-validen SVG mit BIMI erstmal wenig am Hut hat. Denn das verwendet nicht SVG, sondern SVG Tiny P/S (ein Subset von SVG Tiny 1.2 [ein Subset von SVG]), ein völlig valides SVG reicht dafür also nicht aus.

Manchmal sind technische Details eben relevant.