All modern browsers have scalable vector graphic (SVG) file support. But there are several display options for these files.
The simplest method is to display the file directly as an image:
<img src=”test.svg” alt=”My Test SVG File”>
However, in so doing, you lose a unique function of SVG files because it is no longer possible to dynamically change the images using CSS or the SVG code itself.
A better method is to embed the code directly into the HTML using the “svg” tag:
<svg x=”0px” y=”0px” width=”612px” height=”502.174px” viewBox=”0 65.326 612 502.174″ enable-background=”new 0 65.326 612 502.174″ xml:space=”preserve” class=”logo”> <ellipse class=”ground” cx=”283.5″ cy=”487.5″ rx=”259″ ry=”80″/> <path class=”test” d=”testing”/> <filter id=”pictureFilter” > <feGaussianBlur stdDeviation=”15″ /> </filter> </svg>
Then you can manipulate the SVG image with CSS, as follows:
.logo {
width: 200px;
height: 164px;
}
.test {
fill: #94d31b;
}
.test:hover {
fill: #ace63c;
}
.ground {{
fill: #787f6a;
}
.ground:hover {
filter: url(#pictureFilter);
fill: #896d3d;
}
Creating a template for CM WebClient to use this kind of functionality is straightforward. You just need some simple HTML, like this:
<span id=”/(!NameID)” class=”/(!CustomClass:nc:class=/(!Param:class))” style=”/(!DefaultCSS:nc:withPos=/(!Param:default))”>
<svg width=”/(!Size:x)px” height=”/(!Size:y)px”>
</svg>
</span>
Then, add some code in the JSOnLoad and/or add an action to do a SetValue in CM WebClient. You will be able to control the contents of this SVG tag through CA Plex.
Alternatively, you can reference an existing SVG file directly in the browser. By using the Object Tag you can reference an existing file while retaining all the functionality embedded within the SVG file. However, you still do not have control over the file using CSS. To retain control, write HTML that looks like this:
<object type=”image/svg+xml” data=”https://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg” class=”logo”>
</object>
By Abram Darnutzer, Sr. Application Consultant
