Hell Readers,
If you want to create a logo using SVG in HTML 5, it's not a big deal, you can refer below simple example
<!doctype>
<html>
<head>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Evon_Text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="296.086px" height="132.092px" viewBox="0 0 296.086 132.092" enable-background="new 0 0 296.086 132.092"
xml:space="preserve">
<path d="M-0.166,93.833l66.749,0.417L66.333,83H12C12,83,3.002,84.082-0.166,93.833z"/>
<path d="M67,114v10l-51.25-0.167c0,0-18.75,1.167-14.417-23.833H66v8l-47.917,0.334c0,0-6.749-0.334-6.707,2.416
c0.035,2.333,2.146,2.917,7.313,2.917S67,114,67,114z"/>
<polygon points="72.917,83.542 102.084,123.521 113.042,124.01 140.084,84 128,84 107.168,113.084 85.334,83.459 "/>
<path d="M229.625,82.188l-0.313,41.655L241,124.125V95h32c0,0,12-0.563,12.125,9.938c0.125,10.5-0.25,19.062-0.25,19.062H295V96
c0,0,0.5-11.5-10.75-13.5L229.625,82.188L229.625,82.188z"/>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="858.7485" y1="4.7109" x2="890.6646" y2="4.7109" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_1_)" cx="228.708" cy="16.958" r="15.958"/>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="925.7485" y1="-41.6221" x2="984.9985" y2="-41.6221" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_2_)" cx="182.375" cy="97.625" r="29.625"/>
</g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="883.0825" y1="-27.4551" x2="921.9985" y2="-27.4551" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_3_)" cx="196.542" cy="44.792" r="19.458"/>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="883.7485" y1="32.7109" x2="909.6646" y2="32.7109" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_4_)" cx="256.708" cy="38.958" r="12.958"/>
</g>
<g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="918.7485" y1="29.8779" x2="938.9985" y2="29.8779" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_5_)" cx="253.875" cy="71.125" r="10.125"/>
</g>
</svg>
</body>
</html>
0 Comment(s)