"> "> ">

Cómo Usar Texto en SVG para Crear Gráficos Personalizados

Aprende a usar la etiqueta en SVG para crear logotipos y gráficos personalizados con este tutorial paso a paso. Ideal para principiantes y diseñadores con creadorlogos.com."

Ejemplo de un gráfico SVG con texto personalizado creado con creadorlogos.com
Fundamentos de SVG • Publicado por José Manuel Mateos Terrén • 2025-05-13

Cómo Usar Texto en SVG para Crear Gráficos Personalizados

Si ya dominas qué es un SVG y cómo crear figuras primitivas como círculos o rectángulos, es hora de añadir un ingrediente clave: ¡el texto! La etiqueta en SVG te permite incluir títulos, etiquetas o incluso logotipos con tipografías personalizadas, todo escalable y perfecto para la web. En este tutorial, te guiaré paso a paso para que uses texto en SVG y crees gráficos personalizados impresionantes.

Crear texto dentro de un SVG es tremendamente fácil. Solo necesitas copiar una etiqueta en un archivo de texto, cambiar la extensión a .svg, y abrirlo en tu navegador para ver el resultado. Luego, puedes pegar ese SVG directamente en tu página web. Con creadorlogos.com, he diseñado logotipos que combinan texto y formas para marcas de todo tipo. Hoy, te enseñaré cómo hacerlo tú también, ya seas diseñador, programador o principiante.

Paso 1: Crea un SVG con texto básico

Empecemos con lo más básico: añadir texto en un lienzo SVG. La etiqueta define el contenido y su posición, y es increíblemente fácil de usar. Vamos a crear un texto simple que diga "¡Hola, SVG!". Sigue estos pasos:

  1. Abre un editor de texto (como Notepad o Visual Studio Code).
  2. Copia el siguiente código:

<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="50" font-family="Arial" font-size="24" fill="black">
¡Hola, SVG!
</text>
</svg>
  1. Guarda el archivo con la extensión .svg (por ejemplo, hola-svg.svg).
  2. Ábrelo en tu navegador (arrástralo o haz doble clic) o úsalo con el programa profesional y gratuito de sobremesa Inkscape, una herramienta ideal para dibujo vectorial.

Resultado:

¡Hola, SVG!

Aquí, x="20" y y="50" posicionan el texto en el lienzo SVG, font-family="Arial" define la fuente, font-size="24" establece el tamaño, y fill="black" define el color. Sin olvidar que la etiqueta de cabecera "<svg>" y sus propiedades de tamaño determinan el escenario donde se muestra el texto, siendo el punto 0,0 la esquina superior izquierda. ¡Es como escribir en un lienzo digital, pero escalable para cualquier tamaño!

Lo mejor es que puedes copiar este SVG y pegarlo directamente en tu página web. Por ejemplo, si tienes un archivo HTML, incluye el código SVG dentro de un

o donde desees mostrarlo.

Paso 2: Personaliza el texto con estilos

Ahora que sabes cómo añadir texto, personalízalo con estilos para un aspecto más profesional. Usa atributos como font-weight, text-anchor, stroke o fill para darle un toque único. Aquí tienes un ejemplo de texto centrado, con contorno y en negrita:


<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">

  <text 
x="150" 
y="75" 
font-family="Verdana" 
font-size="24" 
font-weight="bold" 
text-decoration="underline" 
fill="#ff6600" 
fill-opacity="0.8" 
stroke="#000000" 
stroke-width="1" 
text-anchor="middle">

    ¡Texto SVG Decorado!

</text>

</svg>

Resultado:

¡Texto SVG Decorado!

Explicación de los atributos:

  • width y height dentro de la etiqueta svg definen las medidas del escenario (300x150 píxeles).
  • x="150" y y="75" posicionan el texto desde el margen superior izquierdo, donde x es la distancia horizontal y y la altura.
  • font-weight="bold": Hace que el texto sea negrita.
  • text-decoration="underline": Añade un subrayado para destacar.
  • fill="#ff6600": Establece un color naranja para el relleno.
  • fill-opacity="0.8": Aplica una ligera transparencia al texto.
  • stroke="#000000" y stroke-width="1": Añaden un contorno negro con grosor de 1 unidad.
  • text-anchor="middle": Centra el texto horizontalmente en x="150".

Experimenta con otras fuentes como "Times New Roman" o "Helvetica", o ajusta font-size para variar el tamaño. Más adelante, te mostraré cómo usar fuentes personalizadas.

Paso 3: Combina texto con figuras primitivas

El texto en SVG cobra vida cuando lo combinas con formas primitivas como círculos o rectángulos. Creemos un logotipo simple con un círculo como fondo y texto encima, ideal para marcas o elementos web. Copia este código en un archivo .svg:


<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="100" r="80" fill="#a1d99b" stroke="#006600" stroke-width="4"></circle>
  <text x="150" y="110" font-family="Arial" font-size="24" font-weight="bold" text-anchor="middle" fill="white">
    Mi Logo
  </text>
</svg>

Resultado:

Mi Logo

Este diseño combina un círculo y texto para un logotipo básico. Aquí tienes cómo funciona:

  • El se centra en cx="150" y cy="100" con un radio de 80 píxeles como fondo.
  • El se centra con text-anchor="middle" y se posiciona en y="110" para quedar dentro del círculo.
  • El fill="white" asegura contraste con el fondo verde claro (#a1d99b).
  • El stroke="#006600" añade un contorno verde oscuro al círculo.

Prueba ajustar colores, fuentes o usa rectángulos o polígonos como fondos. Este diseño es perfecto para logotipos o decoraciones web.

Paso 4: Usa texto en varias líneas con <tspan>

Para textos como títulos y subtítulos, usa La etiqueta <tspan> para controlar líneas múltiples. Creamos un ejemplo con un título y subtítulo:


<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="50" font-family="Arial" font-size="20" text-anchor="middle" fill="black">
    <tspan x="150" dy="0">Bienvenidos</tspan>
    <tspan x="150" dy="30">a mi web</tspan>
  </text>
</svg>

Resultado:

Bienvenidos a mi web

Explicación:

  • dy ajusta el desplazamiento vertical; dy="0" para la primera línea y dy="30" para bajar la segunda 30 píxeles.
  • x="150" con text-anchor="middle" centra ambas líneas horizontalmente.
  • Usa para estilos diferentes, como fill="blue" en una línea.

Este método es perfecto para crear encabezados, etiquetas o mensajes en varias líneas sin necesidad de múltiples etiquetas <text>.

Paso 5: Usa fuentes personalizadas

Haz que tu texto SVG destaque con fuentes personalizadas de Google Fonts. Usemos la fuente "Exile" en un SVG integrado en una página web:


<!DOCTYPE html>

<html>

<head>

  <link href="https://fonts.googleapis.com/css2?family=Exile&display=swap" rel="stylesheet">

</head>

<body>

  <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" class="shadow-md rounded-lg">

    <text 
x="150" 
y="50" 
font-family="'Exile', sans-serif" 
font-size="28" 
font-weight="700" 
text-anchor="middle" 
fill="purple">

      Texto Elegante

    </text>

  </svg>

</body>

</html>

Resultado:

Texto Elegante

Incluye el enlace de Google Fonts en el para que funcione. Si usas solo un archivo .svg, necesitarías incrustar la fuente (tema avanzado), pero el método inline con HTML es más práctico.

Paso 6: Añade texto con creadorlogos.com

Si prefieres evitar el código, creadorlogos.com simplifica la creación de texto en SVGs. Sigue estos pasos:

  1. Visita creadorlogos.com/crear-logos.php.
  2. Selecciona la herramienta de texto desde el menú.
  3. Escribe tu texto y elige una fuente de entre más de 41,421 opciones únicas, casi tan variadas como las de Google, pero con diseños mucho más originales.
  4. Busca tu fuente favorita por orden alfabético o aleatorio, previsualizando la cantidad de fuentes que desees en pantalla.
  5. Combina el texto con formas primitivas (como círculos o estrellas) si lo deseas.
  6. Exporta tu diseño como .svg o .png.
Ejemplos de fuentes personalizadas en gráficos SVG creados con creadorlogos.com

Nota: Para usar fuentes tipográficas de cualquier estilo en programas de texto o diseño, deben estar instaladas en tu ordenador. Cuando guardes un SVG desde nuestra web, el archivo de descarga incluirá la fuente para que la instales o la compartas con tu impresor.

Explora ejemplos de logotipos con texto en creadorlogos.com/ejemplo-logotipos.php. Más de 10,000 diseñadores confían en nuestra plataforma para crear gráficos únicos.

Consejos finales para usar texto en SVG

  • Elige fuentes legibles: Usa Arial, Verdana o fuentes personalizadas de Google Fonts o creadorlogos.com para compatibilidad web.
  • Optimiza el contraste: Asegúrate de que el texto destaque sobre el fondo (e.g., blanco sobre oscuro).
  • Prueba en navegadores: Verifica que las fuentes se muestren bien; usa un respaldo como font-family="'Exile', sans-serif".
  • Usa creadorlogos.com: Simplifica la creación de SVGs con texto sin necesidad de código.
  • Mantén los SVGs ligeros: Optimiza con herramientas como SVGO si incluyes mucho texto o formas.

¿Listo para crear gráficos SVG con texto? Visita creadorlogos.com y empieza hoy. ¡Comparte tus creaciones en los comentarios o en redes con #disenalogos

Artículos Relacionados