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:




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 or contact your account manager today.

What Is RebelMouse?
Request a Proposal

Websites Are Built

The Fastest Sites in the World Run on RebelMouse

Let’s Chat


RebelMouse Performance Monitoring

Real-Time Core Web Vitals

Get Started

Our Core Features

Our platform is a complete digital publishing toolbox that's built for modern-day content creators, and includes game-changing features such as our:

Layout and Design toolLayout and Design tool on mobile

Why RebelMouse?

Unprecedented Scale

RebelMouse sites reach more than 120M people a month, with an always-modern solution that combines cutting-edge technology with decades of media savvy. And due to our massive scale, 1 in 3 Americans have visited a website powered by RebelMouse.

120M+ Users
550M+ Pageviews
17+ Avg. Minutes per User
6+ Avg. Pages per User

Today's Top Websites Use RebelMouse

Thanks to the tremendous scale of our network, we are able to analyze a wealth of traffic data that informs our strategies and allows us to be a true strategic partner instead of just a vendor.

upworthyindy100Vault12No Film SchoolRawStoryResponsible StatecraftPrideMNI Market NewsPremierGuitarPenskeINN Educate Brand ConnectThe FulcrumGZEROOkayafricaBrit+CoPaper MagazinePowerToFlyNarcityCommonDreamsAllBusiness

What Clients Say

We’re here to help you weigh and understand every tech and strategic decision that affects your digital presence. Spend less time managing everything yourself, and more time focused on creating the quality content your users deserve.

Case Studies

A Team Built Like No Other

RebelMouse employs a unique, diverse, and decentralized team that consists of 70+ digital traffic experts across more than 25 different countries. We have no central office, and we cover every time zone to ensure that we’re able to deliver amazing results and enterprise-grade support around the clock.

Our team is well-versed in all things product, content, traffic, and revenue, and we strategically deploy ourselves to help with each element across all of our clients. We thrive on solving the complex.

Let's Chat