SVG Shapes

Formas usando SVG en HTML5

SVG son las siglas de Scalable Vector Graphics y es un lenguaje para describir gráficos 2D y aplicaciones gráficas en XML, y luego el XML se procesa mediante un visor SVG. La mayoría de los navegadores web pueden mostrar SVG al igual que pueden mostrar PNG, GIF y JPG. Puede dibujar formas como círculos, rectángulos, líneas, etc. usando SVG en HTML5 fácilmente.

Formas SVG para un rectángulo

Formas SVG. SVG tiene algunos elementos de forma predefinidos que pueden usar los desarrolladores: Rectángulo <rect>. Círculo <círculo>. Elipse <elipse>. Línea <línea>. Polilínea <polilínea>. Polígono <polígono>.

SVG está basado en XML, lo que significa que es solo texto. Así que simplemente podemos repetir el código SVG y ver los resultados. Lo primero que debemos hacer es dejar que el navegador sepa que se trata de SVG en lugar de texto sin formato. En ese caso, necesitamos usar la función de encabezado () con el tipo de contenido apropiado "image/svg+xml".

SVG en HTML

El elemento HTML es un contenedor para gráficos SVG. SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas. Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento. Lo sentimos, su navegador no es compatible con SVG en línea. Lo sentimos, su navegador no es compatible con SVG en línea.

Tipo de formas en SVG

La ruta es probablemente la forma más general que se puede usar en SVG. Con un elemento de ruta puede dibujar rectángulos (con o sin esquinas redondeadas), círculos, elipses, polilíneas y polígonos.

SVG define gráficos basados en vectores en formato XML. ¿Qué es SVG? El elemento HTML es un contenedor para gráficos SVG. SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas. Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

DEMOSTRACIÓN

En el espacio de nombre del proyecto del articulo anterior, damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “SvgShapes.html”, para luego presionar el botón Add.