DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-05-2015

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

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:

Android SVG

¿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):

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 :/
Su navegador no soporta SVG :/s Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ 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:

Android SVG sin cuello

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:

Su navegador no soporta SVG :/s Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/ Su navegador no soporta SVG :/

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader Battlenet

Loader Battlenet

Loader espiral con CSS

Loader espiral con CSS

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Algunos artículos que te pueden interesar

Configurando un dispositivo Android para desarrollar

Configurando un dispositivo Android para desarrollar

Explicaremos como configurar un dispositivo Android para que al conectarlo en una computadora vía USB, el dispositivo Android pueda ser utilizado para "correr" o instalar nuestras aplicaciones en desarrollo.

Andrés Cruz 24-12-2013

Scrolling horizontal con CSS

Scrolling horizontal con CSS

Andrés Cruz 06-12-2016

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014