title: Toggle layer in SVG
body: <p>I am trying to create a HTML page with a check list that we can also make it large without losing quality. As a result I want to use SVG.  </p>
  
  <p>I would like to have a script to operate on the SVG so that I can toggle the group <code>svg_2</code> (a check mark) on or off so that we have checked and unchecked box.  It doesn't have to change when loaded, just need like an inline command that will do it.</p>
  
  <pre><code>&lt;svg width="20%" height="20%" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="10%" x="2.5%" y="2.5%" width="85%" height="85%" /&gt;
      &lt;g id="svg_2"&gt;
          &lt;line fill="none" stroke="#ff0000" stroke-width="10%" x1="43.5%" y1="77.5%" x2="10.5%" y2="49.5%" id="svg_3" stroke-linecap="round" stroke-linejoin="bevel"/&gt;
          &lt;line fill="none" stroke="#ff0000" stroke-width="10%" x1="95%" y1="9.5%" x2="44.5%" y2="78.5%" id="svg_4" stroke-linecap="round" stroke-linejoin="bevel"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>