Incrustar imágenes y fuentes en SVG
Añade 1 SVG y las imágenes (PNG, JPEG, WebP, GIF) o fuentes (TTF, OTF, WOFF, WOFF2) a las que hace referencia, y combínalos en 1 SVG para no tener que compartir los recursos por separado. Indica el recurso que se usará para cada referencia y crea el SVG. Puedes guardarlo cuando su vista previa se muestre correctamente. Los recursos de URL externas no se obtienen automáticamente.
Lo que puedes hacer
Reunir imágenes y fuentes
Incrusta en el SVG los recursos locales añadidos para reducir la necesidad de enviar los recursos por separado.
Comprobar las referencias y los recursos
Especifica el archivo correspondiente para cada ruta de imagen o nombre de fuente del SVG. El SVG no se crea dejando referencias sin resolver.
Comprobar la visualización del SVG creado y guardar
Comprueba cómo se muestra como imagen y guarda el SVG con los recursos incrustados. Los archivos originales no se sobrescriben.
Cómo se usa
Añadir un SVG y recursos
Elige un SVG y las imágenes y fuentes a las que hace referencia. También puedes añadirlos juntos desde una carpeta.
Asignar los recursos que se van a incrustar
Comprueba el archivo local que se usará para cada referencia. Para las referencias que no coincidan automáticamente, selecciona entre los recursos ya añadidos.
Crear el SVG
Cuando no queden referencias sin resolver, pulsa «Crear SVG con imágenes y fuentes».
Comprobar la visualización y guardar
Comprueba el texto y las imágenes en la vista previa creada antes de guardar. Si no se visualiza, revisa el SVG original y los recursos.
Útil cuando
Entregar juntos el SVG y los recursos
Combina en un único SVG fácil de entregar un gráfico que hace referencia a imágenes y fuentes en carpetas separadas.
Comprobar la causa de las referencias rotas
Compara los recursos necesarios con los archivos añadidos y especifica las imágenes o fuentes que falten.
Cómo funcionan las referencias y la incrustación
Rutas relativas y coincidencia de archivos
Las referencias coinciden automáticamente cuando una ruta de referencia relativa al SVG coincide de forma única con la ruta de un recurso añadido. Selecciona manualmente cuando haya archivos con el mismo nombre en carpetas distintas o cuando los candidatos se solapen.
Especificar el archivo para cada nombre de fuente
La herramienta no extrae fuentes de tu dispositivo solo por los nombres de fuente del SVG. Añade los archivos de fuente necesarios y especifica los archivos correspondientes.
Los recursos en URL no se obtienen automáticamente
Aunque se haga referencia a una URL externa, prepara las imágenes o fuentes localmente y especifícalas. Esta pantalla no tiene ninguna operación para obtener recursos desde URL.
La incrustación es distinta de la reducción del tamaño del archivo
Incluir datos de imagen en el SVG puede aumentar el tamaño del propio archivo SVG. Las fuentes se convierten a WOFF2 y se incrustan. Optimiza el código SVG con otra herramienta.
Diferencias según el método de visualización
La vista previa muestra el SVG como imagen. No se garantiza la misma apariencia en todas las aplicaciones, así que comprueba también la visualización necesaria en el destino.
Preguntas frecuentes
¿Qué hago si no se encuentra un recurso?
Añade imágenes o fuentes y especifícalas en el campo de selección de la referencia correspondiente. La coincidencia automática puede no funcionar con carpetas distintas, rutas duplicadas o URL externas.
¿Qué recursos puedo usar?
Las imágenes pueden ser PNG, JPEG, WebP o GIF; las fuentes pueden ser TTF, OTF, WOFF o WOFF2. Especifica los SVG de uno en uno.
¿Encuentra las fuentes automáticamente?
La herramienta no busca fuentes en tu dispositivo ni en la web solo por el nombre de la fuente. Añade y selecciona un archivo que tengas localmente.
¿Qué ocurre con los recursos ya incrustados?
Las imágenes y fuentes incrustadas como URI de datos, y las referencias # dentro del SVG, no se cuentan como referencias externas. Puedes crear el SVG si no queda ninguna referencia detectada sin resolver.
¿Qué ocurre si añado o vuelvo a elegir recursos?
Si solo añades recursos, se añaden a la lista y se conservan los recursos asignados previamente. Comprueba la coincidencia automática si, por ejemplo, aparecen más candidatos con la misma ruta. Una entrada que incluya un SVG nuevo sustituye el SVG actual y todos sus recursos.
¿Y si hay referencias no compatibles?
Las referencias externas use o script no se pueden incrustar. Los SVG que contienen importaciones de CSS externo tampoco se pueden cargar. Organiza las referencias en la aplicación original u otra aplicación adecuada antes de seleccionar el SVG.
¿El SVG se hará más pequeño?
Reducir el tamaño del archivo no es el objetivo de esta herramienta. Incluir recursos en el SVG puede aumentar su tamaño. Usa la optimización de SVG si quieres ordenar el código.
¿Y si el SVG creado no se puede visualizar?
En esta pantalla la opción de guardar no se muestra hasta que el SVG se visualiza correctamente. Revisa el SVG original y los recursos, repasa las asignaciones o los archivos y créalo de nuevo.
Entrada y resultados
- Entrada
- 1 SVG más imágenes y fuentes. Añadir desde archivos o carpetas.
- Imágenes
- Se incrustan los datos originales de las imágenes añadidas. Las imágenes no se redimensionan ni se comprimen.
- Fuentes
- Las fuentes asignadas se convierten a WOFF2 y se incrustan.
- Salida
- nombre-original-embedded.svg. Puedes guardar cuando el SVG creado se visualice correctamente.