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

6 Loaders con CSS

6 Loaders con CSS

Templates para Android y iOS

Templates para Android y iOS

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Algunos artículos que te pueden interesar

Truco CSS: Construir flechas en los contenedores HTML

Truco CSS: Construir flechas en los contenedores HTML

En esta entrada explicaremos como crear contenedores con flechas o contenedores con una una bifurcación que le colocamos en el mismo.

Andrés Cruz 04-06-2015

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 2)

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 2)

En esta segunda entrega haremos una aplicación funcional utilizando la realidad aumentada y el reconocimiento de imágenes utilizando el API de Wikitude.

Andrés Cruz 23-10-2013

¿Qué es el SDK de Android?

¿Qué es el SDK de Android?

El SDK proporciona las librerías de desarrollo necesarias para construir, testear y debug nuestras aplicaciones para Android.

Andrés Cruz 02-09-2013