{"id":264,"date":"2024-05-21T10:13:51","date_gmt":"2024-05-21T08:13:51","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=264"},"modified":"2024-05-21T10:13:51","modified_gmt":"2024-05-21T08:13:51","slug":"59-svg-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/59-svg-html\/","title":{"rendered":"59. SVG HTML"},"content":{"rendered":"\n

SVG<\/strong> define gr\u00e1ficos basados en vectores en formato XML<\/strong>.<\/p>\n\n\n\n

Qu\u00e9 es SVG?<\/h2>\n\n\n\n
    \n
  • SVG<\/strong> significa Scalable Vector Graphics<\/strong><\/li>\n\n\n\n
  • SVG<\/strong> se utiliza para definir gr\u00e1ficos para la Web<\/li>\n\n\n\n
  • SVG<\/strong> es una recomendaci\u00f3n del W3C<\/strong><\/li>\n<\/ul>\n\n\n\n

    El elemento <svg><\/h2>\n\n\n\n

    El elemento HTML <svg><\/em><\/strong> es un contenedor para gr\u00e1ficos SVG<\/strong>. SVG<\/strong> tiene varios m\u00e9todos para dibujar rutas, cuadros, c\u00edrculos, texto e im\u00e1genes gr\u00e1ficas.<\/p>\n\n\n\n

    SVG c\u00edrculo<\/h3>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<body>\n\n<svg width=\"100\" height=\"100\">\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \/>\n<\/svg>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    Rect\u00e1ngulo SVG<\/h3>\n\n\n\n
    <svg width=\"400\" height=\"100\">\n  <rect width=\"400\" height=\"100\" \n  style=\"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)\" \/>\n<\/svg><\/pre>\n\n\n\n
    Rect\u00e1ngulo redondeado con SVG<\/h3>\n\n\n\n
    <svg width=\"400\" height=\"180\">\n  <rect x=\"50\" y=\"20\" rx=\"20\" ry=\"20\" width=\"150\" height=\"150\"\n  style=\"fill:red;stroke:black;stroke-width:5;opacity:0.5\" \/>\n<\/svg><\/pre>\n\n\n\n
    Estrella SVG<\/h3>\n\n\n\n
    <svg width=\"300\" height=\"200\">\n<polygon points=\"100,10 40,198 190,78 10,78 160,198\"\nstyle=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\" \/>\n<\/svg><\/pre>\n\n\n\n
    SVG logo<\/h3>\n\n\n\n
    <svg height=\"130\" width=\"500\">\n  <defs>\n    <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n      <stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\n      <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\n    <\/linearGradient>\n  <\/defs>\n  <ellipse cx=\"100\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" \/>\n  <text fill=\"#ffffff\" font-size=\"45\" font-family=\"Verdana\" x=\"50\" y=\"86\">SVG<\/text>\n  Sorry, your browser does not support inline SVG.\n<\/svg><\/pre>\n\n\n\n
    Diferencias entre SVG y Canvas<\/h2>\n\n\n\n
    SVG<\/strong> es un lenguaje para describir gr\u00e1ficos 2D en XML<\/strong>. Canvas<\/strong> dibuja gr\u00e1ficos 2D, sobre la marcha (con JavaScript<\/strong>). SVG<\/strong> est\u00e1 basado en XML<\/strong>, lo que significa que todos los elementos est\u00e1n disponibles dentro del SVG DOM<\/strong>. Puede adjuntar controladores de eventos de JavaScript<\/strong> para un elemento.<\/p>\n\n\n\n
    En SVG<\/strong>, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG<\/strong>, el navegador puede volver a representar autom\u00e1ticamente la forma.<\/p>\n\n\n\n
    El lienzo se representa p\u00edxel por p\u00edxel. En el lienzo, una vez que se dibuja el gr\u00e1fico, el navegador lo olvida. Si se debe cambiar su posici\u00f3n, se debe volver a dibujar toda la escena, incluidos los objetos que podr\u00edan haber estado cubiertos por el gr\u00e1fico.<\/p>\n","protected":false},"excerpt":{"rendered":"
    SVG define gr\u00e1ficos basados en vectores en formato XML. Qu\u00e9 es SVG? El elemento <svg> El elemento HTML <svg> es un contenedor…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":58,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-264","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"SVG define gr\u00e1ficos basados en vectores en formato XML. Qu\u00e9 es SVG? El elemento <svg> El elemento HTML <svg> es un contenedor...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/264\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/264\/revisions\/266"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}