SVG en HTML

SVG IN HTML es una guía práctica sobre qué son los SVG y cómo usarlos en páginas web y en aplicaciones a medida

Los formatos de imagen como PNG y JPG son formatos raster o mapa de bits compuestos por una matriz de píxeles y al escalarlos pierden definición y nitidez

Un SVG es un gráfico vectorial escalable que utiliza ecuaciones y coordenadas para dibujar formas por lo que su definición no cambia al modificar su escala, ideal para logos, iconos y gráficos en interfaces y aplicaciones a medida

Uso básico inline en HTML y ejemplo sencillo como texto:

<svg width=100 height=100 viewBox=0 0 100 100 xmlns=https://www.w3.org/2000/svg><circle cx=50 cy=50 r=45 stroke=black stroke-width=4 fill=yellow /><circle cx=35 cy=40 r=7 fill=black /><circle cx=65 cy=40 r=7 fill=black /><path d=M35 65 Q50 80 65 65 stroke=black stroke-width=4 fill=transparent /></svg>

Elementos y atributos clave explicados de forma concisa

xmlns Especifica el namespace del SVG y es necesario

width y height Definen el tamaño de visualización en la interfaz

viewBox Define el sistema de coordenadas interno en el formato minX minY width height

preserveAspectRatio Controla la proporción al escalar

Formas básicas y ejemplos de uso como texto

<line x1=10 y1=10 x2=100 y2=100 />

<rect x=10 y=10 width=100 height=50 />

<circle cx=50 cy=50 r=40 />

<ellipse cx=100 cy=50 rx=50 ry=25 />

<polygon points=50,5 100,100 0,100 fill=orange />

<polyline points=0,40 40,40 40,80 80,80 />

<path d=M10 80 C 40 10, 65 10, 95 80 />

Atributos comunes para dar estilo

fill Color de relleno

stroke Color del contorno

stroke-width Grosor del contorno

opacity, fill-opacity, stroke-opacity Controlan la transparencia total, del relleno o del contorno respectivamente

Texto dentro de SVG y atributos útiles

x y Posición inicial del texto

font-family font-size fill text-anchor Definen fuente, tamaño, color y alineación del texto

Ejemplo de texto en SVG como referencia

<text x=10 y=50 font-family=Verdana font-size=20 fill=black>Hola SVG</text>

Agrupar elementos con g permite aplicar atributos en bloque

<g fill=blue stroke=black><circle cx=40 cy=40 r=30 /><rect x=80 y=20 width=50 height=50 /></g>

Transformaciones frecuentes

translate(x,y) Mueve el elemento

rotate(angle,cx,cy) Rota alrededor de un punto

scale(sx,sy) Escala el elemento

skewX(angle) skewY(angle) Sesga horizontal o verticalmente

Ejemplo de transform como texto

<rect x=10 y=10 width=50 height=50 transform=rotate(45,35,35) />

Por qué usar SVG en proyectos profesionales

Los SVG son ideales para interfaces responsivas, iconografías, dashboards y visualizaciones interactivas en aplicaciones a medida y software a medida porque mantienen nitidez en cualquier resolución, consumen poco peso en general y se integran con CSS y JavaScript para animaciones y accesibilidad

Sobre Q2BSTUDIO

Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad y soluciones cloud. Ofrecemos servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con Power BI para visualización y toma de decisiones

Nuestras capacidades incluyen proyectos de software a medida, integración de agentes IA y diseño de estrategias de ia para empresas que buscan automatizar procesos, mejorar la experiencia de usuario y aumentar la eficiencia operativa

En Q2BSTUDIO combinamos experiencia en desarrollo full stack, modelos de inteligencia artificial y prácticas sólidas de ciberseguridad para entregar soluciones escalables y seguras. También trabajamos en consultoría de servicios inteligencia de negocio, migraciones a servicios cloud aws y azure e implementación de dashboards con Power BI

Palabras clave para encontrar nuestros servicios: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi

Si quieres ver ejemplos, aprender más o trabajar con nosotros visita LinkedIn Gustavo AX en https://www.linkedin.com/in/gustavo-ax/ o contacta Q2BSTUDIO para discutir tu proyecto de software a medida y soluciones de inteligencia artificial

Espero que esta guía rápida sobre SVG en HTML te sirva para entender cuándo y cómo usar gráficos vectoriales en tus proyectos y cómo Q2BSTUDIO puede ayudarte a integrarlos en soluciones avanzadas