16.- Juegos y Multimedia HTML5 - Scalable Vector Graphics

Hace ya más de un mes que vimos como usar lo básico del Web Audio API y cómo pasar de voz a texto con el Web Speech API. Hoy, en la decimosexta entrega del curso, vamos a introducirnos en las imágenes vectoriales en el formato SVG. Dicho formato lleva vigente desde mucho antes de la existencia de HTML5. Nosotros vamos a verlo en este curso porque nos puede ayudar mucho a hacer nuestros juegos, menús, logos...




Código del archivo pruebasSVG.html y la página funcionando aquí:
<!DOCTYPE html>
<html>
    <head>
        <title>Probando SVG</title>
        <style>
            body {
                background-color: #550050;
                text-align: center;
                color: white;
            }
            svg {
                background-color: darkgreen;
            }
            .grupo {
                fill: red;
                stroke: white;
                stroke-width: 3px;
            }
            .grupo:hover {
                fill: white;
                stroke: red;
                stroke-width: 3px;
            }
            rect {
                fill: yellow;
                stroke-width: 0px;
            }
        </style>
        <script>
            function clickCircle(circle)
            {
                var r = circle.getAttribute("r");
                r -= 5;
                circle.setAttribute("r", r);
            }
        </script>
    </head>
    <body>

    <svg width="400" height="400">
        <g class="grupo">
            <line x1="0" y1="0" x2="400" y2="400" />
            <circle cx="0" cy="0" r="300" onClick="clickCircle(this)" />
        </g>
        <rect x="200" y="-200" width="400" height="400" />
        <polygon points="100,200 0,400 200,400" />
    </svg>

    </body>
</html>

Código del archivo imageSVG.html la página funcionando aquí:
<!DOCTYPE html>
<html>
    <head>
        <style>

            body {
                text-align: center;
                background-color: #F52;
            }

        </style>
    </head>
    <body>
        <div>
            Veamos la comparaci&oacute;n entre la calidad de las
            dos im&aacute;genes.
        </div>
        <img src="img/ph.png"></img>
        <object data="img/ph.svg" type="image/svg+xml"
                width="1000" height="1000">
            <img src="img/ph.png"></img>
        </object>
        <embed src="img/vikingo.svg" type="image/svg+xml"></embed>
        <iframe src="img/ps3.svg" type="image/svg+xml"></iframe>
    </body>
</html>

3 comentarios :

  1. Hola, estoy practicando con SVG, hay un detalle importante sobre el primer código que has publicado, el del triángulo, circulo, línea y rectángulo.

    Resulta que en Chrome o mozilla, las figuras quedan dentro del lienzo y no sobresalen, tal como te sale a ti en el video, pero al usar IE10, las figuras que no caben dentro del lienzo generado, por que son demasiado grandes, sobresalen de éste, no se si me explico.

    Hay alguna forma de implementar el código para IE10 dando el mismo resultado que en chrome??

    Gracias, un saludo.

    ResponderEliminar
  2. Desde el sitio http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html es posible ver el codigo de manera global y ahi se ven las propiedades del lienzo.

    ResponderEliminar
    Respuestas
    1. Esa herramienta está genial, gracias por compartirla!

      Eliminar