How to create SVGs with Amplience

What are SVGs?

SVG is an acronym for Scalable Vector Graphics, which is an XML language and file format. This allows you to code two-dimensional graphics that can scale and be manipulated via CSS or JavaScript. An SVG can be a static image, like a logo or photograph, or a complex animation.

All SVG graphics are plotted on a coordinate system of at least an x and y axis. When rasterizing (converting the vector format into an image) an SVG, it plots the points on the coordinate system and connects them. By connecting the plotted points, we can create shapes, lines, or paths.

Due to SVG being vector-based, when the image is scaled up there is no degradation or loss of quality, as they are just simply redrawn to accommodate the larger size. This makes SVG perfect for multi-context scenarios e.g. Responsive Web Design.

Why Create SVGs?

As SVG is built as XML which means that it can be edited using text editors and IDEs (Integrated Development Environments) that have great XML support and syntax highlighting - making it easier to read and edit. SVG uses predefined shape elements in the design process. The elements are very basic. For example, <circle> draws a circle. You use attributes to define the coordinates, such as radius, color and border.

1<circle cx="100" cy="50" r="40" stroke="black" stroke-width="1" fill="blue"/>

This creates a blue circle with a thin, black border. The circle will be 40 pixels in radius and sit at specified coordinates on the page. This of course is a very basic example of SVG in action. There is certainly much more to working with SVG than the basics. Animation, filters, gradients all are available when creating SVG images. You can even animate SVG files with CSS!

That’s great, but when and how do I use them on my site?

As we mentioned above, SVGs are built on the XML format. This means a designer could use a tool like Inkscape or another design tool to create one, like this simple star with text:

1<?xml version="1.0" encoding="utf-8"?> 
2
3<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" width="500" height="500"> 
4
5  <path d="M 250 0 L 328.027 163.472 L 500 190.983 L 376.25 319.525 L 404.509 500 L 250 415.971 L 95.491 500 L 123.75 319.525 L 0 190.983 L 171.973 163.472 Z" style="fill: rgb(255, 0, 0); stroke: rgb(255, 0, 0);" bx:shape="star 250 276.393 262.866 276.393 0.505 5 1@b0c8ecd5" bx:origin="0.487 0.544"/> 
6
7  <text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; white-space: pre;" transform="matrix(3.699056, 0, 0, 4.216069, -874.676697, -533.534607)"><tspan x="284.571" y="187.55">50%</tspan><tspan x="284.571" dy="1.2em">​</tspan><tspan>OFF</tspan></text> 
8
9</svg>

Now that we have this code it’s actually very easy to make changes in any text editor:

• Change the percentage saving text (replace 50% with any other number).

• Change the color of the text (replace: fill: rgb(255, 255, 255) with some other rgb value).

• Change the color of the star (replace) fill: rgb(255, 0, 0) with some other rgb value.

Again - why would you want to do this if you have a template, and a CMS that allows you to create similar content? Most of the time you wouldn’t, but let’s say you need a bespoke design for a particular event that happens very rarely; an End of Season Sale, or Black Friday perhaps. The design breaks all of your normal templates, but you need something outside of the box that requires very little developer input, a low-code solution. SVG could solve your problem perfectly, and enable some interesting options for moving through the various stages of a campaign.

Another example might be customization or personalization. Your brand demands a particular font is used, or copy has to be laid out on a banner in a way that makes it impossible to create something with normal CSS in a cross-browser compliant way.

Amplience facilitates a number of ways to use SVGs within the platform:

Static publishing

This is the simplest option, simply upload your SVG to Content Hub and you can access it exactly as it was uploaded, allowing you to combine them however you need to with your other web assets:

1https://bccdemo.a.bigcontent.io/v1/static/star

can be requested like any other image:

1<div> 
2
3      <img class="d-block img-fluid" src="https://cdn.media.amplience.net/i/bccdemo/IMG_3659" width="100%" border=0 /> 
4
5      <img alt="Ready. Set. Summer!" class="sitewide-arclpb" src="https://bccdemo.a.bigcontent.io/v1/static/star4" width="20%" style="position:absolute; top:10%; left:5%;"> 
6
7    </div>

Dynamic Media Rasterization

The next option is using Amplience Dynamic Imaging Service to transform an uploaded SVG into an image like a JPEG (or any other supported format): 

How is this different to the previous option? 

At first glance it’s not immediately obvious, especially on its own.

However, because this is now an image we can use it like any other image - as a layer for instance:

This is just one example of how you can use SVGs within Dynamic Imaging. Check out the docs for the many ways you can manipulate images within the platform. Some good ideas would include:

• Use smart images to serve appropriate formats for each browser.

• Use ternaries to swap out the roundel SVG for a different one based on a variable.

• Use ternaries to change the layout / positioning of the image and roundel, depending on the size requested.

Other benefits of this approach include:

• Less complexity for developers - positioning the elements is done before it reaches the client.

• Reduced risk of the SVG rendering in an unexpected way due to SVG incompatibility.

Dynamic Media SVG customization

The final option here puts some fairly impressive power in the hands of end users.

In the previous example, you would have needed to create different SVGs for each variation of color, percentage saving.

Amplience offers a service that allows you to substitute values into the SVG code at render time via parameters:

1https://cdn.graphics.amplience.net/v1/media/graphics/i/bccdemo/star4_2?reduction=30%&fill=rgb(0,255,0)&stroke=rgb(255,0,0)

You can find how to do all this within our documentation.

Gotchas

Publishing SVGs in Amplience

SVGs can fail to publish in Amplience for the following reasons:

• Missing absolute height and width values in the SVG element.

• Non-valid SVG - this can cover a multitude of errors; the publishing logs will give you clear indicators of what has caused the failure.

Useful tools:

• Online SVG creator

  • a powerful online tool if you want to do something quick, or don’t have Inkscape or another SVG editing tool to hand.

• XML / SVG validator

  • handy if your SVGs aren’t publishing and you need more detailed validation checking.

• XPath checker

  • this is useful if you’re struggling with getting the right element to substitute.

Get started with SVGs

I hope this article helps provide an overview of what you can do with SVGs within Amplience. If you have any questions, please contact your Customer Success Manager.