Cómo Usar Texto en SVG para Crear Gráficos Personalizados
Si ya dominas las bases que vimos en nuestra guía sobre qué es un SVG y cómo estructurar figuras primitivas, es hora de añadir un ingrediente clave: ¡el texto! La etiqueta <text> en SVG te permite incluir títulos, etiquetas o incluso logotipos con tipografías personalizadas, todo ello 100% escalable y optimizado para la web. En este tutorial, te guiaré paso a paso para que aprendas a usar texto en SVG y crees gráficos personalizados impresionantes.
Crear texto dentro de un archivo SVG es muy sencillo. Solo necesitas insertar la etiqueta en un documento de texto plano, cambiar la extensión a .svg y abrirlo en tu navegador favorito. En creadorlogos.com, hemos diseñado logotipos profesionales que combinan texto vectorial y formas geométricas. Hoy te enseñaré cómo aplicarlo tú mismo, sin importar si eres diseñador, programador o principiante.
Paso 1: Crea un SVG con texto básico
Empecemos por lo fundamental: añadir texto en un lienzo SVG mediante la etiqueta <text>. Vamos a escribir el mensaje "¡Hola, SVG!" siguiendo estos pasos:
- Abre tu editor de código de confianza (como Notepad o Visual Studio Code).
- Copia y pega 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>- Guarda el archivo con la extensión
.svg(por ejemplo,hola-svg.svg). - Visualízalo directamente en cualquier navegador web o impórtalo en editores vectoriales como Inkscape o Adobe Illustrator.
Resultado visual:
Los atributos x="20" e y="50" posicionan el texto dentro del lienzo, tomando como referencia el punto (0,0) en la esquina superior izquierda. Puedes insertar este código directamente en el cuerpo HTML de tu web dentro de un contenedor <div>.
Paso 2: Personaliza el texto con estilos avanzados
Puedes aplicar atributos de diseño como grosor, decoraciones, opacidad y trazos mediante código. Observa este ejemplo con texto centrado y contorneado:
<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:
Paso 3: Combina texto con figuras geométricas
El verdadero potencial del texto SVG se revela al integrarlo con formas primitivas para construir logotipos sencillos:
<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:
Paso 4: Texto en varias líneas con <tspan>
Para estructurar titulares y subtítulos independientes sin declarar múltiples etiquetas de texto, emplea la etiqueta <tspan>:
<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:
Paso 5: Diseña logotipos con texto fácilmente en creadorlogos.com
Si prefieres una experiencia visual rápida y sin programar código a mano, la plataforma de creadorlogos.com te permite:
- Escribir y posicionar texto eligiendo entre miles de tipografías exclusivas.
- Combinar tus títulos con formas geométricas y recursos vectoriales profesionales.
- Exportar tu diseño directamente en formato SVG o como imagen PNG lista para usar en redes sociales y proyectos digitales.
Explora más ejemplos inspiradores en nuestra sección de identidades corporativas en creadorlogos.com/ejemplo-logotipos.php. ¡Empieza a diseñar hoy mismo!
