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:
¿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:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter