Cómo incluir íconos SVG en sprites dentro de la etiqueta body

Question

Cómo incluir íconos SVG en sprites dentro de la etiqueta body

14 feb 2017, 17:01:22

Vistas: 13.6K

Votos: 4

Quiero incluir un archivo de íconos SVG después de la etiqueta body y estoy usando este código:

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

Pero obtengo este error:

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

El propósito de esto es poder usar esos íconos con una sola línea de código:

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

¿Cómo puedo cargar un archivo SVG correctamente en WordPress?

Sajad

143

desarrollo de temas svg

Comentarios

¿Por qué intentas hacer un include de PHP cuando deberías estar usando una etiqueta IMG de HTML? PHP include es para archivos PHP.

Brian Fegter

14 feb 2017 17:13:44

@BrianFegter No puedo usar la etiqueta img. Es un archivo svg grande que incluye muchos iconos. Aquí está mi referencia para esta solución https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Sajad

14 feb 2017 17:16:50

Ok, no es una pregunta reciente pero para algunos aún puede ser útil saber que simplemente puedes incluir svg cuando renombras su extensión a 'svg.php'.

Hexodus

8 mar 2019 00:27:54

Todas las respuestas a la pregunta

El comando include_once() se utiliza para incluir archivos php. SVG es simplemente un archivo de imagen, por lo que debe tratarse de la misma manera que tratas un archivo de imagen (la mayoría de las veces).

En tu caso, si deseas usarlo como fuente, debes incluirlo en tu archivo CSS, usando:

@font-face{
    font-family:mi-fuente;
    url('TU URL SVG AQUÍ') format('svg');}

Luego puedes usar los códigos de fuente definidos para llamar a diferentes partes del sprite. Hay muchas guías sobre cómo usar SVG como fuente.

Otra opción sería usar etiquetas <img>, como Brian sugirió en los comentarios.

También puedes usar SVG como imágenes de fondo, de la misma manera que usas un archivo jpg como propiedad background-image en CSS.

Johansson

15.4K

14 feb 2017 17:23:14

Comentarios

Gracias por tu respuesta. Pero no quiero usarlo como fuente ni siquiera como imagen, porque es una colección de iconos. (Actualicé la pregunta).

Sajad

14 feb 2017 17:28:54

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

Es porque no es así como deberías incluir un SVG en PHP,
include_once se utiliza para incluir archivos PHP.

La razón detrás de este error:

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

es que PHP no pudo analizar el comienzo del archivo SVG en el punto donde se definió la versión XML:

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

Solución 1: Para solucionarlo, simplemente elimina la etiqueta de encabezado XML de tu archivo SVG por completo.

Solución 2: Sigue estos tutoriales. (Recomendado)

Esta es una forma mucho mejor de incluir SVGs en tus temas. Ambos explican el mismo concepto.
Estos tutoriales te ayudarán a entender cómo incluir un SVG en PHP en WordPress.

¿Ahora cómo incluirlos después de la etiqueta body?
Esto requiere que uses estos tutoriales en los archivos de tu tema donde corresponda.
Por ejemplo, si tu tema abre la etiqueta body en index.php, necesitarás modificar index.php e incluir los SVGs allí.

Solución 3:

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

Puedes simplemente imprimir el contenido de tu archivo SVG donde quieras en la sección HTML de tu archivo PHP.

Sin embargo, manipular archivos de tema requiere cierto conocimiento de PHP y WordPress.