Construyendo nuestro propio logo Android con SVG en HTML

21-05-2015 - Andrés Cruz

Construyendo nuestro propio logo Android con SVG en HTML

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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

  • 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 :/
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 :/

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!