Logo BIMI: creare un file SVG Tiny-PS conforme in 4 passaggi

⚡TL;DR

• BIMI impone il profilo SVG Tiny 1.2 PS (Portable/Secure): nessun script, nessun link esterno, nessuna immagine incorporata
• Un logo BIMI deve essere quadrato, centrato, con un viewBox di 0 0 X X e l'attributo baseProfile="tiny-ps"
• Usa il convertitore SVG Tiny-PS di CaptainDNS per pulire e validare automaticamente il tuo file

Il tuo dominio supera DMARC, il tuo record BIMI è pubblicato, ma il logo non viene ancora visualizzato in Gmail o Yahoo Mail. Il problema spesso deriva dal file SVG stesso: BIMI non accetta qualsiasi SVG. Richiede un profilo molto specifico chiamato SVG Tiny 1.2 PS (Portable/Secure).

Questo profilo vieta tutto ciò che potrebbe rappresentare un rischio per la sicurezza: script JavaScript, link a risorse esterne, font web, animazioni. Un logo esportato da Illustrator o Figma contiene quasi sempre elementi vietati. Senza pulizia, il provider di posta elettronica ignora semplicemente il file.

Questa guida ti accompagna dalla preparazione del file sorgente fino alla validazione finale. È rivolta ad amministratori di sistema, team di email marketing e CTO di PMI che vogliono implementare BIMI senza passarci tre giorni.

Cos'è il formato SVG Tiny-PS?

SVG Tiny 1.2 è un sottoinsieme dello standard SVG definito dal W3C, inizialmente progettato per dispositivi con risorse limitate (telefoni, PDA). Il profilo PS (Portable/Secure) aggiunge restrizioni di sicurezza specifiche per BIMI:

• Nessun script (<script> vietato)
• Nessun link esterno (<image>, <use xlink:href="http://..."> vietati)
• Nessuna interattività (<a>, eventi onclick vietati)
• Nessuna animazione (<animate>, <set> vietati)

La logica è semplice: un logo visualizzato in una casella di posta non deve mai eseguire codice né caricare risorse esterne. È una superficie d'attacco che i provider di posta elettronica si rifiutano di aprire.

Differenze con un SVG standard

Funzionalità	SVG standard	SVG Tiny-PS
Script JavaScript	Sì	No
Link esterni (<image>)	Sì	No
Animazioni	Sì	No
Filtri (<filter>)	Sì	No
Gradienti lineari/radiali semplici	Sì	Sì
Forme di base (<rect>, <circle>, <path>)	Sì	Sì
Testo (<text>)	Sì	Sì
Gruppi (<g>)	Sì	Sì
ClipPath	Sì	Sì

Il formato consente gli elementi visivi necessari per un logo (forme, colori, testo). Blocca tutto ciò che potrebbe servire come vettore di attacco.

Requisiti tecnici di un logo BIMI

Dimensioni e rapporto

Il logo BIMI deve essere quadrato. Non c'è una dimensione imposta in pixel, ma il viewBox deve rispettare un rapporto 1:1:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 100 100">

La maggior parte delle implementazioni utilizza un viewBox di 0 0 100 100 o 0 0 512 512. L'importante è che i due ultimi valori siano identici.

Attributi XML obbligatori

Quattro attributi sono richiesti sull'elemento <svg> radice:

Attributo	Valore richiesto	Ruolo
xmlns	http://www.w3.org/2000/svg	Namespace SVG
version	1.2	Versione SVG Tiny
baseProfile	tiny-ps	Profilo di sicurezza BIMI
viewBox	0 0 X X (quadrato)	Dimensioni logiche

L'assenza di baseProfile="tiny-ps" è l'errore più comune. Senza questo attributo, i provider rifiutano il file anche se il contenuto è valido.

Elementi consentiti e vietati

Consentiti: <svg>, <g>, <defs>, <title>, <desc>, <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>, <text>, <tspan>, <linearGradient>, <radialGradient>, <stop>, <solidColor>, <clipPath>, <use> (solo riferimento locale)

Vietati: <script>, <image>, <foreignObject>, <a>, <animate>, <animateTransform>, <animateColor>, <set>, <filter>, <feGaussianBlur>, <pattern>, <mask>, <symbol>, <marker>, <switch>, <cursor>

Creare un logo BIMI in 4 passaggi

Passaggio 1: preparare il file sorgente

Parti da un logo vettoriale pulito. Indipendentemente dallo strumento (Illustrator, Inkscape, Figma, Affinity Designer), l'obiettivo è ottenere un SVG con:

• Un piano di lavoro quadrato (512x512 px o 100x100)
• Il logo centrato nel riquadro
• Nessuna zona trasparente critica (il logo verrà visualizzato su uno sfondo variabile a seconda del client di posta)
• Forme appiattite: converti i testi in tracciati (<path>) se il font non è standard

Consiglio: esporta in "SVG standard" dal tuo strumento. Non cercare di esportare direttamente in Tiny-PS, perché nessun strumento di design supporta questo profilo nativamente.

Passaggio 2: pulire l'SVG

Un SVG esportato da uno strumento di design contiene quasi sempre elementi superflui:

• Metadati dell'editor: commenti di Illustrator, tag <metadata>, namespace xmlns:inkscape
• Stili CSS: blocchi <style> con classi
• Attributi inutili: id, data-name, xml:space
• Elementi invisibili: gruppi vuoti, maschere non utilizzate

Esempio di SVG grezzo esportato da Illustrator:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 512 512">
  <defs>
    <style>.cls-1{fill:#0EA5E9;}</style>
  </defs>
  <metadata><!-- ... --></metadata>
  <g id="Layer_1" data-name="Layer 1">
    <circle class="cls-1" cx="256" cy="256" r="200"/>
  </g>
</svg>

Questo file non supererà la validazione BIMI: mancano version, baseProfile, e contiene un blocco <style> e dei <metadata>.

Passaggio 3: convertire con il convertitore CaptainDNS

Piuttosto che pulire manualmente (rischio di dimenticanze), usa un convertitore automatico. Il convertitore SVG Tiny-PS di CaptainDNS:

1. Aggiunge gli attributi mancanti (version="1.2", baseProfile="tiny-ps")
2. Rimuove gli elementi vietati (script, animazioni, immagini esterne)
3. Converte gli stili CSS inline in attributi SVG
4. Pulisce i metadati, i commenti e i namespace superflui
5. Normalizza il viewBox in rapporto quadrato

Incolla il tuo SVG o carica il file, e recupera il risultato conforme.

Passaggio 4: validare il risultato

Dopo la conversione, verifica che il file contenga:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2"
     baseProfile="tiny-ps"
     viewBox="0 0 512 512">
  <title>Logo captaindns.com</title>
  <circle cx="256" cy="256" r="200" fill="#0EA5E9"/>
</svg>

Punti di controllo:

• version="1.2" è presente
• baseProfile="tiny-ps" è presente
• viewBox è quadrato
• Nessun <script>, <image>, <animate> o <style> residuo
• L'elemento <title> è consigliato (accessibilità)

Testa poi il tuo logo con lo strumento di verifica BIMI CaptainDNS per confermare che sia recuperabile in produzione.

Errori frequenti e come correggerli

Blocco <style> nel file

Sintomo: il validatore segnala "CSS styles not allowed".

Causa: Illustrator e Figma esportano i colori sotto forma di classi CSS.

Soluzione: convertire le classi in attributi fill e stroke direttamente su ogni elemento. Il convertitore CaptainDNS effettua questa trasformazione automaticamente.

baseProfile assente o errato

Sintomo: il file viene rifiutato nonostante un contenuto valido.

Causa: l'attributo baseProfile="tiny-ps" manca sull'elemento <svg> radice. È l'errore più frequente perché nessun editor grafico lo aggiunge.

Soluzione: aggiungere baseProfile="tiny-ps" e version="1.2" sul tag <svg>.

Immagini incorporate in base64

Sintomo: il validatore segnala "image element not allowed".

Causa: un elemento <image> con un href="data:image/png;base64,..." è presente. Alcuni strumenti integrano bitmap nell'SVG.

Soluzione: ricreare l'elemento in puro vettoriale (<path>, <circle>, ecc.) o rimuoverlo.

viewBox non quadrato

Sintomo: il logo appare deformato o non viene visualizzato.

Causa: un viewBox="0 0 800 400" produce un rapporto 2:1, non 1:1.

Soluzione: ritagliare il logo in un riquadro quadrato e regolare il viewBox di conseguenza.

Elementi <filter> o <mask>

Sintomo: il validatore segnala "filter/mask element not allowed".

Causa: effetti come ombre portate, sfocature gaussiane o maschere di ritaglio avanzate sono presenti.

Soluzione: rimuovere questi effetti e ricreare l'aspetto con forme semplici se necessario.

🎯 Piano d'azione consigliato

1. Verificare la tua policy DMARC: deve essere p=quarantine o p=reject con pct=100. Senza DMARC valido, BIMI non funzionerà.
2. Esportare il tuo logo in SVG dal tuo strumento di design con un piano di lavoro quadrato
3. Convertire l'SVG con il convertitore SVG Tiny-PS di CaptainDNS per ottenere un file conforme
4. Ospitare il file in HTTPS su un URL accessibile pubblicamente (esempio: https://captaindns.com/bimi/logo.svg)
5. Pubblicare il record DNS BIMI: default._bimi.captaindns.com TXT "v=BIMI1; l=https://captaindns.com/bimi/logo.svg;"

FAQ

Come creare un logo BIMI conforme SVG Tiny-PS?

Esporta il tuo logo in SVG da uno strumento vettoriale (Illustrator, Figma, Inkscape) con un piano di lavoro quadrato. Passa il file in un convertitore SVG Tiny-PS per aggiungere gli attributi obbligatori (version="1.2", baseProfile="tiny-ps") e rimuovere gli elementi vietati (script, animazioni, immagini esterne).

Quali sono i requisiti tecnici del formato SVG Tiny-PS?

Il file deve contenere version="1.2" e baseProfile="tiny-ps" sul tag radice, un viewBox quadrato, e nessun elemento vietato: niente <script>, <image>, <animate>, <filter>, <style>, <a> o <foreignObject>. Le forme di base, i gradienti semplici e il testo sono consentiti.

Quali dimensioni deve avere un logo BIMI?

Non c'è una dimensione minima imposta in pixel. Il viewBox deve essere quadrato (rapporto 1:1). I valori comuni sono 0 0 100 100 o 0 0 512 512. I provider di posta elettronica ridimensionano il logo secondo i propri vincoli di visualizzazione.

Come convertire un SVG classico in SVG Tiny-PS?

Usa un convertitore dedicato che aggiunge gli attributi mancanti, rimuove gli elementi vietati, converte gli stili CSS in attributi inline e pulisce i metadati. Il convertitore CaptainDNS effettua tutte queste operazioni in un solo passaggio.

Serve un certificato VMC per visualizzare il proprio logo BIMI?

Dipende dal provider. Gmail richiede un VMC (Verified Mark Certificate) o un CMC (Common Mark Certificate). Yahoo Mail e Apple Mail possono visualizzare il logo senza certificato. Consulta la nostra guida VMC vs CMC per i dettagli.

Come testare se il mio logo BIMI è valido?

Ospita il file SVG in HTTPS, pubblica il tuo record DNS BIMI, poi usa uno strumento di verifica BIMI per controllare che il file sia accessibile e conforme al profilo SVG Tiny-PS.

Quali elementi SVG sono vietati in un logo BIMI?

I principali elementi vietati sono: <script>, <image>, <foreignObject>, <a>, <animate>, <animateTransform>, <set>, <filter>, <pattern>, <mask>, <symbol>, <marker>, <switch> e <cursor>. Qualsiasi elemento che consenta l'esecuzione di codice, il caricamento di risorse esterne o l'interattività è vietato.

📖 Glossario

• SVG Tiny 1.2 PS: profilo ristretto dello standard SVG (W3C) progettato per BIMI. Il suffisso PS significa Portable/Secure e aggiunge restrizioni di sicurezza oltre a SVG Tiny 1.2.
• BIMI: Brand Indicators for Message Identification. Standard che permette di visualizzare un logo del marchio nei client di posta elettronica, condizionato a un'autenticazione email rigorosa (DMARC).
• VMC: Verified Mark Certificate. Certificato emesso da un'autorità (DigiCert, Entrust) che associa un logo a un marchio registrato. Richiesto da Gmail per il badge di verifica.
• CMC: Common Mark Certificate. Alternativa al VMC che non richiede un marchio registrato. Accettato da Gmail dal 2024.
• DMARC: Domain-based Message Authentication, Reporting and Conformance. Policy di autenticazione email che condiziona il funzionamento di BIMI.

---

Converti il tuo logo adesso: usa il convertitore SVG Tiny-PS di CaptainDNS per trasformare il tuo file SVG in un logo BIMI conforme in pochi secondi.

---

📚 Guide BIMI correlate

• SVG Tiny-PS: comprendere il profilo di sicurezza BIMI (in arrivo)
• Configurare BIMI per una PMI: guida economica senza VMC (in arrivo)

Fonti

• SVG Tiny 1.2 Specification (W3C)
• BIMI Group - Implementation Guide
• RFC 9495 - BIMI
• Google Workspace - Configurare BIMI