Developers

How to Add Scalable Vector Graphics to RebelMouse

How to Add Scalable Vector Graphics to RebelMouse

Quickly add an SVG to any page

A Scalable Vector Graphic, or SVG, is a type of graphic format that gives you more flexibility than standard formats like JPEG or PNG.

To add an SVG to your RebelMouse site, first go to your Layout & Design tool. Next, open the SVG in a code editor and copy the entire <svg> element. Then, add a Custom HTML element to your layout and paste in the SVG code:


You can also place the code inside of an Element Wrapper for easier positioning:

It's important to note that the SVG must be optimized. An SVG draws the vector points in a browser, so if an image has too many vector points it can freeze and not render properly.

Best practices for adding SVGs to AMP

When adding SVGs to AMP there are certain best practices that optimize performance.

There are two main aspects to this process. The first is removing tags from the SVG HTML code. You want to remove the following tags:

<def>

<title>

<xml>

In the case you have custom css in <style> tags, place this css in the AMP CSS element and remove the <style> tags from inside the <svg> tag.




So, for example, take this SVG code:


I bolded the tags you want to remove for AMP. For the style tag you would take ".cls-1{fill:#fce4e9;}.cls-2{fill:#204285;}" and place it in the AMP css element.

SVGs for Logos

Last, if you are using an SVG for a logo it can be a good idea to wrap the <svg> tag in <a> tags to create a hyperlink to home.


Click here for a refresher on all of the elements offered in our Layout & Design tool. If you have any questions about SVGs on RebelMouse, email support@rebelmouse.com or contact your account manager today.

What Is RebelMouse?
Request a Proposal
subscription model for publishers
Rebel Insights

In 2023, Publishers Take Back Control With Subscription Success

Users are ready to pay for content that delivers

The Rise of the Mature User

It's been a long and winding path, but in 2023 the subscription model continues its upward trajectory as a top revenue strategy for publishers of all sizes. The tug of war between platforms and publishers reached its peak in the last few years of the previous decade, leaving users desperate for a modern user experience that's clear of any clutter from the duopoly that is Google and Facebook. This is why intelligent paywall models are a top choice for users looking to consume content right from the source. When done correctly, the strategy can work for any type of media. The New York Times, a frequent showpiece example of the power of paywalls, is constantly reporting record-busting subscription numbers, with 7.6 million digital subscriptions in 2021.

And it all makes perfect sense. The subscription model eliminates the middleman — such as the platforms — so readers get the experience and content they want, and publishers get the cash they need.

Keep reading...Show less
The Most Secure CMS of 2023
Featured

The Most Secure CMS of 2023

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Keep reading...Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now