CanvasMap
Getting Started Tutorials 3D Reference

Creating Icons

SVG, or Scalable Vector Graphics, are widely used for creating icons on the web. The advtange of using SVG is that drawing of the icon, including its size and style, can be controled from JavaScript to allow a wide variety of icons to be created from a single SVG file. There are a number of applications that allow the creationg of SVG but I find that PowerPoint is very easy to use.

Use Existing Icons

material.io

Using MS-PowerPoint To Create Icons

  1. In PowerPoint, go to Design and make the presentation size 1" by 1".
  2. Using the PowerPoint tools to draw the icon. There is no need to change the colors or line widths.
  3. Save the slide to an SVG file.
  4. Open the SVG file in a text editor like NotePad++. The code will look something like the code below:
    1. <svg width="96" height="96" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="0" y="0" width="96" height="96"/></clipPath></defs><g clip-path="url(#clip0)"><path d="M0 0 96 0 96 96 0 96Z" fill="#FFFFFF" fill-rule="evenodd"/><path d="M96.5001 0.500053C2.19443 1.49725 94.1357 98.976 0.500053 96.4519" stroke="#2F528F" stroke-width="1.33333" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
  5. PowerPoint adds the outer "SVG" wrapper, a clipping page, and a rectangle for the background. We don't need these. All we need is the "path" element. Copy this element and paste it into the code below where indicated:
    1. <svg id="CM_ToolEdit_SVG" stroke="#000000" fill="#ffffff" viewBox="0 0 24 24" width="24" height="24" >[Add Path Here] </svg>
  6. You'll want to remove the stroke and fill attributes from the original path so we can set them in JavaScript.
  7. The viewBox determines the area of the SVG rendering that will be included in the icon. Because we set the dimensions of the icon to 1" by 1", we can set the viewBox to 100 x 100.
  8. If you're icon does not have a filled area, you can set fill="none"
  9. With width and height attributes set the final dimensions of the icon.
  10. The final result should look something like this:
    1. <svg id="CM_ToolEdit_SVG" stroke="#000000" stroke-width="4" fill="none" viewBox="0 0 100 100" width="24" height="24" ><path d="M96.5001 0.500053C2.19443 1.49725 94.1357 98.976 0.500053 96.4519" /></svg>