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
