Cum să includ SVG sprite icons în tag-ul body?

Question

Cum să includ SVG sprite icons în tag-ul body?

14 feb. 2017, 17:01:22

Vizualizări: 13.6K

Voturi: 4

Vreau să includ un fișier SVG cu iconițe după tag-ul body și folosesc acest cod:

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

Dar primesc această eroare:

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

Scopul este să pot folosi aceste iconițe cu o singură linie de cod:

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

Cum pot încărca corect un fișier SVG în WordPress?

Sajad

143

dezvoltare teme svg

Comentarii

De ce încerci să folosești un include PHP când ar trebui să folosești un tag HTML IMG? PHP include este pentru fișiere PHP.

Brian Fegter

14 feb. 2017 17:13:44

@BrianFegter Nu pot folosi tagul img. Este un fișier SVG mare care include multe icoane. Iată referințele mele pentru această soluție https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Sajad

14 feb. 2017 17:16:50

Ok, nu este o întrebare proaspătă, dar pentru unii ar putea fi încă util să știe că poți include simplu un SVG dacă îi schimbi extensia în 'svg.php'.

Hexodus

8 mar. 2019 00:27:54

Toate răspunsurile la întrebare

Comanda include_once() este folosită pentru a include fișiere PHP. SVG este doar un fișier imagine, ar trebui tratat așa cum tratezi un fișier imagine (de cele mai multe ori).

În cazul tău, dacă vrei să-l folosești ca font, ar trebui să-l incluzi în fișierul tău CSS, folosind:

@font-face{
    font-family:my-font;
    url('URL-UL TĂU SVG AICI') format('svg');}

Apoi poți folosi codurile definite ale fontului pentru a apela diferite părți ale sprite-ului. Există numeroase ghiduri despre cum să folosești SVG ca font.

O altă opțiune ar fi să folosești tag-uri <img>, așa cum a sugerat Brian în comentarii.

De asemenea, poți folosi SVG ca imagini de fundal, la fel cum folosești un fișier jpg ca proprietate background-image în CSS.

Johansson

15.4K

14 feb. 2017 17:23:14

Comentarii

Mulțumesc pentru răspuns. Dar nu vreau să le folosesc ca font sau chiar ca imagini, pentru că este o colecție de pictograme. (Am actualizat întrebarea.)

Sajad

14 feb. 2017 17:28:54

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

Acest lucru se întâmplă deoarece nu acesta este modul corect de a include un SVG în PHP.
include_once este utilizat pentru includerea fișierelor PHP.

Motivul din spatele acestei erori:

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

este faptul că PHP nu a putut analiza începutul fișierului SVG în punctul în care a fost definită versiunea XML:

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

Soluția 1: Pentru a remedia această problemă, pur și simplu elimină antetul XML din fișierul tău SVG.

Soluția 2: Urmează aceste tutoriale. (Recomandat)

Aceasta este o metodă mult mai bună de a include SVG-uri în temele tale. Ambele tutoriale explică același concept.
Aceste tutoriale te vor ajuta să înțelegi cum să incluzi un SVG în PHP în WordPress.

Cum să le incluzi după tag-ul body?
Aceasta necesită să folosești aceste tutoriale în fișierele temei tale unde este potrivit.
De exemplu, dacă tema ta deschide tag-ul body în index.php, va trebui să modifici index.php și să incluzi SVG-urile acolo.

Soluția 3:

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

Poți pur și simplu să afișezi conținutul fișierului tău SVG oriunde dorești în secțiunea HTML a fișierului tău PHP.

Totuși, lucrul cu fișierele temei necesită cunoștințe de PHP și WordPress într-o oarecare măsură.