AdNow

loading...

SVG HTML5

-

SVG HTML5

❮ AnteriorSiguiente ❯

¿Qué es SVG?

  • SVG significa Scalable Vector Graphics
  • SVG se usa para definir gráficos para la Web
  • SVG es una recomendación del W3C

El elemento HTML <svg>

El elemento HTML <svg> es un contenedor para gráficos SVG.
SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas.

Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente el elemento <svg>.
Element
<svg>4.09.03.03.210.1

SVG Circle


Ejemplo

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"fill="yellow" />
</svg>

</body>
</html>
Pruebelo usted mismo »

Rectángulo SVG



Ejemplo


<svg width="400" height="100">
  <rect width="400" height="100"style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Pruebelo usted mismo »

SVG Rounded Rectangle


Ejemplo


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Pruebelo usted mismo »

SVG Star


Ejemplo


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Pruebelo usted mismo »

SVG Logo

SVG

Ejemplo


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%"y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
  <text fill="#ffffff" font-size="45" font-family="Verdana"x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>
Pruebelo usted mismo »

Diferencias entre SVG y Canvas

SVG es un lenguaje para describir gráficos 2D en XML.
Canvas dibuja gráficos 2D, sobre la marcha (con JavaScript).
SVG está basado en XML, lo que significa que cada elemento está disponible dentro del SVG DOM. Puede adjuntar controladores de eventos de JavaScript para un elemento.
En SVG, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede volver a renderizar automáticamente la forma.
El lienzo se muestra píxel por píxel. En el lienzo, una vez que se dibuja el gráfico, el navegador lo olvida. Si se debe cambiar su posición, se debe volver a dibujar toda la escena, incluidos todos los objetos que podrían haber sido cubiertos por el gráfico.

Comparación de Canvas y SVG

La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:
CanvasSVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications
Para obtener más información sobre SVG, lea nuestro Tutorial de SVG .

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la sép...
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente,...
Leer más

Visitas a este blog