SVG – Scalable Vector Graphics ( gráficos vetoriais escalonáveis )

Tecnicamente todas as imagens geradas por um computador são resultado de cálculos matemáticos, afinal trata-se de converter dados binários em informações que consigamos interpretar. Basicamente para gerar as imagens são utilizadas duas principais técnicas:

Bitmap (Raster) – Grosso modo, trata-se de enfileirar pixels de atributos diferentes para formar as imagens que vemos. A principal desvantagem desse método é que ao redimensionar, aumentando uma imagem, você acaba perdendo definição, pois a sua resolução sempre será predefinida, além de gerar arquivos significativamente maiores. A principal vantagem é a quantidade de detalhes da imagem, não à toa, é utilizado em fotografias e vídeos.

Vetorial – São imagens geradas dinamicamente a partir de vetores, ou seja, retas formadas de um ponto A até um ponto B. A grande vantagem é que por serem geradas dinamicamente, ao aumentar sua resolução, sua definição permanece a mesma e o tamanho do arquivo também, excelente para aplicações em logotipos por exemplo, que precisam ser redimensionados de acordo com a mídia onde são exibidos. A desvantagem seria a pouca quantidade de detalhes que essas imagens possuem, porém a popularização do design flat mudou isso.

O SVG é um formato baseado em XML. De maneira simples, trata-se de uma forma de conseguir utilizar imagens vetoriais em aplicações como websites e aplicativos por exemplo.

Hoje em dia existe um demanda cada vez maior por soluções responsivas, layouts que se adaptem aos mais variados tamanhos de telas, desde um celular até uma televisão 4k, e é isso que torna o SVG uma solução excelente e necessária para uma boa exibição de elementos nesses dispositivos.

Em web design, o SVG pode ser incorporado como código em aplicações HTML e modificado através de CSS, sendo possível inclusive, criar pequenas animações e, por ser um formato leve, permite que você crie trabalhos muito bonitos e que consomem pouco da franquia de internet dos visitantes do site. Veja abaixo uma demonstração de SVG utilizando apenas HTML e CSS:

SVG Syntax:

<svg version="1.1" id="mecelis-studio-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">

<path class="objeto-01 animate-path" d="M497.6,172.6l-13.4-7.7l-148.7,85.5c-9.6,5.5-21.3,5.5-30.9,0l-148.7-85.5l-13.4,7.7c-14.3,8.2-14.3,28.8,0,37 l0,0v212l42,24.1v-197c0-6.7,7.2-10.9,13-7.5l111.8,64.3c6.7,3.8,14.9,3.8,21.6,0l111.8-64.3c5.8- .3,13,0.9,13,7.5v197l42-24.1 v-212l0,0C511.9,201.4,511.9,180.8,497.6,172.6z"></path>

<path class="objeto-02 animate-path" d="M252.5,210l54.9-31.5c7.8-4.5,17.4- .5,25.3,0l54.9,31.5l45.6-26.2L332.6,126c-7.8-4.5-17.4-4.5-25.3,0 l-100.5,57.8L252.5,210z"></path>

<path class="objeto-03 animate-path" d="M307.4,512.6c7.8,4.5,17.4,4.5,25.3,0l110.1-62.8V263.2c0-3.4-3.6-5.5-6.5-3.8l-111,64.5 c-3.2,1.8-7.1,1.8-10.3,0l-111-61.5c-2.9-1.7-6.5,0.4-6.5,3.8v35.6l117.6,64.6c3.2,1.8,7.1,1.8,10.3,0l71.4-41.1v95.4l-0.1-0.1 l-63.9,39.5c-7.8,4.5-17.4,4.5-25.3,0l-64.6-36.4v-76c0-1.6-0.8-3-2.2-3.8l-37.4-21.5c-2.9-1.7-6.5,0.4-6.5,3.8v122.6L307.4,512.6z"></path>

</svg>

CSS Syntax:

.exemplo-svgpost-fundo {
    background: #2b2b2b;
    margin: 10px 0 20px;
    border-radius: 6px;
}

	#mecelis-studio-logo{
		width: 500px;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	.objeto-01{
		fill:#fd9d3e;
		stroke: #DDDDDD;
		stroke-width: 2px;
	}
	.objeto-02{
		fill:#f56b09;
		stroke: #DDDDDD;
    	stroke-width: 2px;
	}
	.objeto-03{
		fill:#d64425;
		stroke: #DDDDDD;
		stroke-width: 2px;
	}
	.animate-path {
	  stroke-dashoffset: 2200;
	  stroke-dasharray: 2200;
	  -webkit-animation: draw 7.5s linear infinite;
	  -moz-animation: draw 7.5s linear infinite;
	  animation: draw 7.5s linear infinite;
	  fill-opacity: 0;
	}
	@keyframes draw {
		30% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity:1;}
		35% { stroke-opacity:1;}
		40% { stroke-opacity:0;}
		50% { fill-opacity: 1;}
		95% { stroke-dashoffset: 0; fill-opacity: 1;}
		100%{ stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity:0;}
	}

Por fim, você não precisa aprender a criar as imagens digitando códigos, basta utilizar seu editor preferido como illustrator ou inkscape, salvar sua imagem em formato SVG e utilizar um editor de texto para abrir o arquivo, todos os códigos estarão lá para você utilizar da maneira como quiser.