• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

How to style SVG with CSS in WordPress

I use SVG files in my websites in place of image files wherever I can. I love the ease of changing the properties of an SVG ‘image’ such as the colour. In particular the small file-size (relatively to a PNG or JPEG image) and ability to scale whilst maintaining visual quality are winners for me.
WordPress logo

WordPress, by default, doesn’t allow the insertion of inline SVG into pages nor posts. Importing into the media library also isn’t by default permitted. There are plugins available that mostly allow for adding SVG files into the media library and then displaying the SVG file via an IMG tag. The issue with this method is that it isn’t possible to then adjust the properties of the SVG using CSS. For example if you wanted to change the colour of an SVG inserted into WordPress using an IMG tag, then .class { fill: #ffffff; } nor .class { color: #ffffff; } nor any other means will work.

Fortunately there is a plugin available that will both allow for adding a SVG file to the file manager in addition to in-lining the SVG image.

The Plugin to add and inline SVG in WordPress

SVG Support is the plugin that solves the various WordPress SVG issues for us. The plugin does the following:

  1. Allows for adding SVG files into the WordPress media library.
  2. Inserts SVG files into pages and posts inside the HTML IMG tag.
  3. Optionally adds a new class to the inserted IMG tag
  4. Optionally inlines the SVG image.

The last two items above are by default not enabled when you activate the plugin. To enable the two options:

  1. Go to the settings page for the plugin.
  2. Click ‘Yes’ next to the Enable Advanced Mode? question.
  3. Save the change.
  4. Click ‘Yes’ next to the Automatically insert class? question.
  5. Save the change.

How to style SVG images in WordPress

Now that the SVG is in-lined in your page or post you may use CSS to style the ‘image’. The SVG Support plugin by default adds a class of style-svg to each in-lined SVG. This means that, for example, to change the colour of the file you’ll add the following CSS:

.style-svg {
    fill: #fff;
}

Have fun. You are now able to use CSS in WordPress to style your SVG images.

Found this useful? Please share:

Related

  • How to get Mailchimp Subscriber Popup working in WordPress
  • How to host Google fonts locally in WordPress (and boost Core Web Vitals SEO)
  • Fix WordPress image rotation problem

Filed Under: WordPress

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

Reader Interactions

Comments

  1. Goran says

    October 16, 2021 at 11:56 pm

    If we need plugin to style svg then,i ll not use svg-s at all.

    Reply

Leave a Reply Cancel reply

You are here: Home / WordPress / How to style SVG with CSS in WordPress

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2022 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service