Tutorial SVG - Paso 1

by Mariana Villamizar

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="400" y1="600" x2="400" y2="-9.094947e-13">
    <stop offset="0" style="stop-color:#54D1E2" />
    <stop offset="1" style="stop-color:#29ABE2" />
  </linearGradient>
  <rect id="fondo" class="st0" width="800" height="600" />
  <path id="nube1" class="st1" d="M256.7,87.3c-5.4,0-10.5,0.6-15,1.7c0.1-0.6,0.1-1.1,0.1-1.7c0-11.2-11.2-20.2-25-20.2
	c-7.9,0-14.9,2.9-19.5,7.5c-3-5.3-8.7-8.8-15.2-8.8c-8.3,0-15.2,5.8-17.1,13.5c-6.3-5.9-15.6-9.6-26-9.6c-16.5,0-30.3,9.5-33.5,22
	c-1.1-0.1-2.2-0.1-3.3-0.1c-20.4,0-36.9,9.2-36.9,20.6c0,11.4,16.5,20.6,36.9,20.6c3.3,0,6.6-0.3,9.6-0.7
	c4.5,9.1,17.4,15.6,32.5,15.6c7.9,0,15.2-1.8,21.1-4.8c1.5,8.2,8.6,14.5,17.3,14.5c8.7,0,15.8-6.3,17.3-14.5
	c5.6,3,12.9,4.8,20.8,4.8c17.9,0,32.5-9.3,32.5-20.9c0-0.7-0.1-1.4-0.2-2.1c1.2,0.1,2.4,0.1,3.7,0.1c19.9,0,36-8.5,36-18.9
	S276.6,87.3,256.7,87.3z" />
  <path id="nube2" class="st1" d="M365.1,498.7c0-0.1,0-0.1,0-0.2c0-9.5-16-17.1-35.8-17.1c-3.4,0-6.6,0.2-9.7,0.6c0-0.2,0-0.4,0-0.6
	c0-14.4-11.7-26.1-26.1-26.1c-14.4,0-26.1,11.7-26.1,26.1c0,1.6,0.2,3.1,0.4,4.6c-4.7-2.9-10.5-4.6-16.8-4.6
	c-15.8,0-28.5,10.6-28.5,23.6c0,1,0.1,2,0.2,2.9c-15.2,1.9-26.6,10-26.6,19.7c0,11.1,14.9,20.1,33.3,20.1c8.3,0,15.9-1.8,21.7-4.9
	c1,12.1,16,21.8,34.3,21.8c12.3,0,23-4.3,29.1-10.8c4.7,2.3,10.9,3.7,17.5,3.7c15.1,0,27.3-7.2,27.3-16c0-1.1-0.2-2.2-0.6-3.3
	c0.2,0,0.4,0,0.6,0c21.9,0,39.6-8.9,39.6-19.8C398.9,508.4,384.2,500.1,365.1,498.7z" />
  <path id="nube3" class="st1"...

CSS

.st0 {
	  fill: url(#SVGID_1_);
	}
	
	.st1 {
	  fill: #FFFFFF;
	  stroke: #333333;
	  stroke-width: 10;
	  stroke-linejoin: round;
	  stroke-miterlimit: 10;
	}
	
	.st2 {
	  fill: #333333;
	}
	
	.st3 {
	  fill: #D95430;
	}
	
	.st4 {
	  fill: #F5D220;
	}
	
	.st5 {
	  fill: #A9E02F;
	}