In breve
- L’esportazione SVG di Gradiently mantiene le parole come testo vero nei loro caratteri, inclusi nel file, e tiene forme, icone, grafici e tabelle come vettori.
- Dentro un SVG il Mark e le eventuali foto sono immagini, quindi il file scala alla perfezione per testo e forme ma non all’infinito per lo sfondo.
- Un SVG contiene una pagina, quindi un carosello o una presentazione esportano un SVG per ogni pagina che scegli.
- Lo sfondo trasparente esporta solo i tuoi elementi come PNG, senza il Mark, pronti da posizionare su un’altra immagine o su un colore.
- Le esportazioni SVG e PNG trasparente fanno parte di Pro.
In questa pagina
Per esportare un SVG da Gradiently, apri un design nello Studio, scegli Esporta e seleziona SVG. Le parole restano parole, nei loro caratteri inclusi nel file; forme, icone, grafici e tabelle restano vettori; il Mark e le foto entrano come immagini al suo interno. Per un PNG trasparente, scegli PNG e attiva Sfondo trasparente: ottieni solo i tuoi elementi su sfondo vuoto, senza il Mark. Entrambi fanno parte di Pro.
SVG, PNG o PNG trasparente
A cosa serve
A cosa serve
Cosa ottieni
A cosa serve
Il compromesso generale tra i due formati è spiegato in SVG o PNG. Questa guida riguarda cosa mette Gradiently in ogni file.
Cosa resta vettoriale in un’esportazione SVG
Vettoriale: nitido a qualsiasi misura
- Le parole, come testo vero che puoi selezionare e modificare
- I caratteri, inclusi nel file
- Forme e linee
- Icone
- Grafici e tabelle
Immagini dentro l’SVG
- Il Mark, lo sfondo vivo
- Le foto che hai aggiunto
- Qualsiasi carattere la cui licenza vieta l’incorporamento
Quindi un SVG è perfetto per un titolo che deve restare nitido su uno schermo 4K, o per un layout che uno sviluppatore inserirà in una pagina, ed è meno utile se speri di ingrandire lo sfondo a misura di cartellone. Il Mark viene reso come immagine alla misura del design; per uno sfondo più grande, esporta invece un PNG a una misura più alta. Un Mark è un rendering vivo e non un insieme fisso di forme vettoriali, ed è per questo che non può diventare un tracciato.
Come esportare un SVG
- 1
Scegli la pagina
Un SVG contiene una pagina. In un carosello o in una presentazione, scegli la pagina in Esporta; ripeti per le altre.
- 2
Scegli SVG
Apri Esporta e scegli SVG, descritto come scalabile, il testo resta testo. L’anteprima mostra la misura della pagina.
- 3
Scarica
Scegli Scarica SVG. Il file si salva dove il tuo browser salva i download.
- 4
Usalo sul web
Inseriscilo con un tag
imgper una grafica fissa, oppure incorporalo nell’HTML quando vuoi stilizzare il testo con il CSS.
<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">
<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
<!-- paste the contents of summer-launch.svg here -->
</div>Un SVG si apre anche in strumenti di design come Figma e Illustrator, che leggono testo e forme vettoriali come livelli modificabili. Per questo è il file giusto da consegnare a chi deve adattare un layout a un formato che Gradiently non copre, come un cartello stampato con un suo modello, o uno sviluppatore che costruisce una sezione di pagina dal tuo design. Invia accanto il PNG come riferimento visivo, così può vedere esattamente come deve apparire il Mark.
Come esportare un PNG trasparente
Scegli PNG in Esporta e attiva Sfondo trasparente. Tutto ciò che hai posizionato, parole, logo, forme, foto, resta; il Mark resta fuori e lo spazio intorno ai tuoi elementi è trasparente. Scegli una misura fino a 4K. Scritte, logo e slogan esportati così possono stare sopra una foto di prodotto, un video in un altro editor o una slide colorata.
Il design completo: il logotipo sul suo Mark, da pubblicare così com’è.
Esportati con Sfondo trasparente, logotipo e slogan viaggiano da soli e possono essere posati su uno sfondo diverso, senza cambiamenti.
- Controlla l’inchiostro rispetto a dove andrà. Parole chiare esportate per un Mark scuro spariranno su una pagina bianca. Passa a un inchiostro scuro prima di esportare se la destinazione è chiara.
- Rifila la pagina sul contenuto. Un PNG trasparente mantiene la misura intera della pagina. Avvicina prima la pagina ai tuoi elementi se vuoi un file compatto.
- Tieni entrambe le versioni del logo. Esportane una per fondi scuri e una per fondi chiari, come fa un brand kit. Logo su sfondo sfumato mostra perché.
- Usa PNG, non JPEG. Il JPEG non ha trasparenza; un design trasparente salvato come JPEG riceve uno sfondo pieno.
Posizionare un PNG trasparente sul web
Un PNG trasparente si sovrappone in modo pulito a qualsiasi sfondo CSS, utile quando le parole sono fisse ma lo sfondo cambia per sezione o tema. Impilalo con un gradiente dietro e la tua grafica ci sta sopra.
.launch-banner {
aspect-ratio: 1200 / 600;
background:
url("/images/launch-words.png") center / contain no-repeat,
linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%)Per il caso opposto, un gradiente che sfuma nella trasparenza in CSS, vedi gradiente CSS trasparente. E quando ti serve l’insieme di tutti i formati in un posto solo, esportare i design copre insieme PNG, JPEG, PDF, video e GIF.
Le domande più frequenti
Come esporto un SVG da Gradiently?
Apri il design, scegli Esporta, poi SVG, e scarica. Un SVG contiene una pagina, quindi in un design con più pagine scegli prima la pagina.
L’esportazione SVG mantiene il testo modificabile?
Sì. Le parole restano testo vero, con i caratteri inclusi nel file, a meno che la licenza di un carattere vieti l’incorporamento: in quel caso quel testo viene disegnato come pixel.
Lo sfondo a gradiente è vettoriale in un’esportazione SVG?
No. Il Mark è un rendering vivo, quindi viene incluso come immagine dentro l’SVG. Forme, icone, grafici, tabelle e testo sono vettori.
Come esporto un PNG con sfondo trasparente?
Scegli PNG in Esporta e attiva Sfondo trasparente. I tuoi elementi restano e il Mark viene escluso, su sfondo vuoto.
Posso esportare in SVG con il piano gratuito?
No. Le esportazioni gratuite sono PNG o JPEG a 720p con una piccola filigrana; SVG, PDF e PNG trasparente fanno parte di Pro.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo