Come includere icone SVG sprites nel tag body?

Question

Come includere icone SVG sprites nel tag body?

14 feb 2017, 17:01:22

Visualizzazioni: 13.6K

Voti: 4

Voglio includere un file di icone SVG dopo il tag body e sto usando questo codice:

<?php include_once("assets/img/sprites.svg"); ?>

Ma ottengo questo errore:

Parse error: syntax error, unexpected T_STRING in /home/ostadba1/public_html/wp-content/themes/ostad/assets/img/sprites.svg on line 1

Lo scopo di questo è che voglio usare quelle icone con una sola riga di codice:

<svg class="icon"><use xlink:href="#shopping-cart"></use></svg>

Come posso caricare correttamente un file SVG in WordPress?

Sajad

143

sviluppo temi svg

Commenti

Perché stai cercando di fare un include PHP quando dovresti usare un tag HTML IMG? PHP include è per file PHP.

Brian Fegter

14 feb 2017 17:13:44

@BrianFegter Non posso usare il tag img. È un file svg grande che include molte icone. Ecco il mio riferimento per questa soluzione https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Sajad

14 feb 2017 17:16:50

Ok, non è una domanda recente ma per alcuni potrebbe essere ancora utile sapere che puoi semplicemente includere un svg quando rinomini la sua estensione in 'svg.php'.

Hexodus

8 mar 2019 00:27:54

Tutte le risposte alla domanda

Il comando include_once() viene utilizzato per includere file php. SVG è semplicemente un file immagine, dovrebbe essere trattato come si tratta un file immagine (nella maggior parte dei casi).

Nel tuo caso, se vuoi usarlo come font, dovresti includerlo nel tuo file CSS, utilizzando:

@font-face{
    font-family:my-font;
    url('IL TUO URL SVG QUI') format('svg');}

Poi puoi usare i codici del font definito per richiamare diverse parti dello sprite. Ci sono molte guide su come usare SVG come font.

Un'altra opzione sarebbe usare i tag <img>, come ha suggerito Brian nei commenti.

Puoi anche usare SVG come immagini di sfondo, nello stesso modo in cui usi un file jpg come proprietà background-image in CSS.

Johansson

15.4K

14 feb 2017 17:23:14

Commenti

Grazie per la tua risposta. Ma non voglio usarlo come font o addirittura come img, perché è una raccolta di icone. (Ho aggiornato la domanda.)

Sajad

14 feb 2017 17:28:54

user6552940 867 · Accepted Answer · 2017-02-14T17:34:45Z

È perché non è così che dovresti includere un SVG in PHP,
include_once viene utilizzato per includere file PHP.

La ragione dietro questo errore:

PHP Parse error: syntax error, unexpected version (T_STRING)

è che PHP non è stato in grado di analizzare l'inizio del file SVG nel punto in cui era definita la versione XML:

<?xml version="1.0" encoding="utf-8"?>

Soluzione 1: Per risolvere questo problema, rimuovi completamente il tag di intestazione XML dal tuo file SVG.

Soluzione 2: Segui questi tutorial. (Consigliato)

Questo è un modo molto migliore per includere SVG nei tuoi temi. Entrambi spiegano lo stesso concetto.
Questi tutorial ti aiuteranno a capire come includere un SVG in PHP in WordPress.

Ora, come includerli dopo il tag body?
Questo richiede che tu utilizzi questi tutorial nei file del tuo tema dove appropriato.
Ad esempio, se il tuo tema apre il tag body in index.php, dovrai modificare index.php e includere gli SVG lì.

Soluzione 3:

<?php echo file_get_contents("filename.svg"); ?>

Puoi semplicemente visualizzare il contenuto del tuo file SVG dove vuoi nella sezione HTML del tuo file PHP.

Tuttavia, modificare i file del tema richiede una certa conoscenza di PHP e WordPress.