Construyendo nuestro propio logo Android con SVG en HTML

Las últimas entradas realizadas hablan de como usar SVG en HTML: sus componentes, primitivas, atributos y gradientes:

• Dibujando nuestro propios SVG en HTML (parte 1)
• Gradientes SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento:

¿Por qué molestarse en construir una imagen a partir de SVG/HTML y no usar una imagen tradicional?

El porqué de esto se debe principalmente se debe al dinamismo y lo fácil que resulta generar SVGs personalizados según (por ejemplo) datos retornados de otras tecnologías como PHP; además construir una imagen SVG/HTML evita cargar una imagen de la manera tradicional (y esto se traduce en tiempo), esto se debe a que se crea desde cero a través de HTML.

Construyendo nuestro logo de Android

El SVG que construiremos tienes unas dimensiones de 300px por 300px; esto quiere decir que el tamaño de la imagen en fijo y no varía sin importar el tamaño de la pantalla.

Si analizamos la imagen anterior o nuestro logo personalizado de Android nos daremos cuenta de que está armado a partir de las primitivas vistas en la entrada: Dibujando nuestro propios SVG en HTML (parte 1):

• Elipses: Para la cabeza.
• Círculos: Para los ojos.
• Rectángulos: Para los brazos, piernas, antenas y torso.

Y esto es todo lo necesario para construir nuestro logo de Android.

El logo de Android en la práctica

Los rectángulos

Primero vamos a crear todos los rectángulos para los brazos, piernas, antenas y torso hasta obtener la siguiente figura:

    <svg>
    <!--cabeza-->
    <ellipse cx="170" cy="50" rx="50" ry="45"></ellipse>
    Su navegador no soporta SVG :/s

    <!--pierna izquierdo-->
    <rect x="140" y="150" width="20" height="60" rx="15" ry="15" id="c"></rect>
    Su navegador no soporta SVG :/
    <!--pierna derecho-->
    <rect x="180" y="150" width="20" height="60" rx="15" ry="15" id="c"></rect>
    Su navegador no soporta SVG :/

    <!--brazo izquierdo-->
    <rect x="90" y="60" width="20" height="100" rx="15" ry="15" id="c"></rect>
    Su navegador no soporta SVG :/

    <!--torzo-->
    <rect x="120" y="50" width="100" height="120" rx="15" ry="15" id="c"></rect>
    Su navegador no soporta SVG :/
    <!--brazo derecho-->
    <rect x="230" y="60" width="20" height="100" rx="15" ry="15" id="c"></rect>
    Su navegador no soporta SVG :/

A excepción del CSS de las antenas (el cual trataremos en la sección final) el CSS empleado es el siguiente:

        svg {
                display: block;
                margin: 10px auto;
                width:300px;
                height:300px;			
        }
        rect#b {
                fill:rgba(255, 255, 255, 1);
        }
        rect#c {
                fill:rgba(204, 204, 0, 1);
        }

        circle{
                fill:rgba(255, 255, 255, 1);
        }
        ellipse{
                fill:rgba(204, 204, 0, 1);
        }
        line{
                stroke-width:2;
                stroke:rgba(0, 204, 0, 1);
        }

Del HTML no hay mucho que decir, se emplean los atributos x y y para ubicar los rectángulos y los atributos width y height para definir el ancho y alto respectivamente.

Hay un rectángulo oculto que permite ocultar parte de la elipse de la cabeza y del torso, de esta forma se crea esa forma tan particular de la cabeza de Android y evitar que el logo quede de la siguiente manera:

El rectángulo es el siguiente y su color es blanco:

    <rect x="115" y="50" width="110" height="10" id="b"></rect>
    Su navegador no soporta SVG :/
    </svg>

La elipse

Para la cabeza se emplea el siguiente HTML:

    <ellipse cx="170" cy="50" rx="50" ry="45"></ellipse>

Y el siguiente CSS:

    ellipse{
            fill:rgba(204, 204, 0, 1);
    }

Los círculos

Llegó el momento de los ojos; al ser dos se usan dos círculos para tal proposito:

    
      <circle cx="150" cy="30" r="7"></circle>
            Su navegador no soporta SVG :/
      <circle cx="190" cy="30" r="7"></circle>
            Su navegador no soporta SVG :/

De nuevo con los rectángulos para las Antenas

Finalmente colocaremos sus respectivas antenas a nuestro logo de Android, hemos dejado como último casa colocar las antenas debido a que resulta un poco más complejo alinearlas y esto se debe a que es la única de las figura que tiene un CSS para su rotado; por lo tanto emplearemos la siguiente propiedad CSS para realizar esta tarea:

-webkit-transform: rotateZ(deg);

Colocando todo junto para tener nuestras antenas nos queda:

        rect#antena1 {
                fill:rgba(204, 204, 0, 1);
                -webkit-transform: rotateZ(11deg);
                -moz-transform: rotateZ(11deg);
                transform: rotateZ(11deg);
        }
        rect#antena2 {
                fill:rgba(204, 204, 0, 1);
                -webkit-transform: rotateZ(-17deg);
                -moz-transform: rotateZ(-17deg);
                transform: rotateZ(-17deg);
        }

    <!--antena izquierdo-->
    <rect x="230" y="30" width="4" height="30" rx="3" ry="3" id="antena1"></rect>
    Su navegador no soporta SVG :/

    <!--antena derecho-->
    <rect x="140" y="10" width="4" height="30" rx="3" ry="3" id="antena2"></rect>
    Su navegador no soporta SVG :/

Y esto es todo; con el código HTML/CSS visto anteriormente es suficiente para crear la siguiente figura: