Orienteering
/
mobile_h5


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>SVGInject Simple Example</title>

  <!-- Include the SvgInject javascript file -->
  <script src="svg-inject.js"></script>

  <script>
    SVGInject.setOptions({
      onFail: function(img, status) {
        console.info(status);
      }
    });
  </script>

  <style>
    /* Apply colors to injected SVG with id #businesspeople-variation */
    #businesspeople-variation-1 .color-1 { color: #68C4B5; }
    #businesspeople-variation-1 .color-2 { color: #FBCA61; }
    #businesspeople-variation-1 .color-3 { color: #DD7378; }
    #businesspeople-variation-1 .color-4 { color: #8B959D; }

    #businesspeople-variation-2 .color-1 { color: #607D8B; }
    #businesspeople-variation-2 .color-2 { color: #EC407A; }
    #businesspeople-variation-2 .color-3 { color: #C2185B; }
    #businesspeople-variation-2 .color-4 { color: #90A4AE; }

    /* class to define an image size of 128px */
    .size-128 {
      width: 128px;
      height: 128px;
    }
  </style>
</head>
<body>
  <h1>SVGInject Simple Example</h1>
  
  <h3>Not inject SVG:</h3>

  <!-- Insert not styled SVG image -->
  <img src="svgs/businesspeople.svg" class="size-128" />

  <h3>Injected SVG with no style (default SVG colors):</h3>

  <!-- Insert not styled SVG image -->
  <img src="svgs/businesspeople.svg" onload="SVGInject(this)" class="size-128" />
  
  <h3>Injected SVGs styled with CSS in two different color schemes:</h3>

  <!-- Insert the same SVG image styled with CSS in two different color schemes -->
  <img src="svgs/businesspeople.svg" onload="SVGInject(this)" class="size-128" id="businesspeople-variation-1" />
  <img src="svgs/businesspeople.svg" onload="SVGInject(this)" class="size-128" id="businesspeople-variation-2" />
</body>

<!-- Don't worry about this script. It's used to provide feedback if the example is not running correctly. -->
<script src="_example_helpers/xhr-check.js"></script>
</html>