SVGs on the web

Guest post by Bauke Roesink

The guys at PSDtoWP.net would like to change developers' mindsets about SVG. SVG and its use on the web were already recommended by W3C about 13 years ago. Despite the recommendation, many developers still don't choose SVG automatically. Since the usage of SVG on the web has a lot of advantages, I would like developers not only to dive deep into SVG but also to use SVG files during their daily tasks. The reason is pretty straightforward: SVGs have many benefits over JPG, PNG and GIF files. As a result Bauke from psdtowp.net created a fancy SVG infographic which not only defines SVG but which also explains the various benefits and the exact way SVG should be used on your websites.


The ultimate SVG guide

Comments

How to select two svg element by "ctr + mousedown" ?

I want to select the two svg element (for example A, and B) same time.  I try to add "mousedown" event to A and B. But how do I select A and B same time using "ctr + mousedown" ?

I like to understand how I can change SVG path which contains relative (‘m’) command to absolute (‘M’) commands. I have created two identical paths where Green path should cover Black, but that is not is case. How SVG compiler render relative path. Your help will be very much appreciated.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 498.9 498.9" width="100%" height="100%">
  <g>

    <path stroke-width="5" stroke="black" d="M21.52,184.48 H91.11 v-.07 H21.54 l0,.07Z
M469,147.4 q1.62,0,3.21,.12 l-406.4,0 c.67,-.05,1.35,-.09,2,-.12 l401.16,0Z
m8.55,.76,10.22,10 H60.82 l23.56,-.1 h6 l-5.47,.06Z
m6,5.2,10.7,10.15,-419.89,0,.4,-.09,418.79,0Z" transform="translate(0 -100)"/>
   
    <path stroke-width="5" stroke="green" d="M21.52,184.48 L91.11,184.48 L91.11,184.41 L21.54,184.41 L21.54,184.48Z
 M469,147.4 Q470.62,147.4,472.21,147.52 L65.81,147.52 C66.48,147.47,67.16,147.43,67.81,147.4 L468.97,147.4Z
 M477.52,148.16 L487.74,158.16 L60.82,158.16 L84.38,158.06 L90.38,158.06 L84.91,158.12Z
 M90.91,163.32 L101.61,173.47 L-318.28,173.47 L-317.88,173.38 L100.91,173.38Z" transform="translate(0 -100)" />
  </g> 
</svg>

Post new comment

The content of this field is kept private and will not be shown publicly.