<!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>