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

OrganicWeb

Mailchimp Services for Medium & Large Organizations

  • Home
  • Services
    • Mailchimp Corporate/Team Training
    • Mailchimp Consulting
    • Mailchimp Live Public Classes
    • Mailchimp Recommendations Report
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About
You are here: Home / WordPress / How to style SVG with CSS in WordPress

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, 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

  • Top Reasons for Mailchimp Image Problems
  • Fix WordPress image rotation problem
  • Solve WordPress AMP 'Image missing and required'

Filed Under: WordPress

Watch Gary in action

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

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Leave a Reply Cancel reply

Primary Sidebar

Free Mailchimp Tutorial

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 ratings

Mailchimp pro partners

Contact

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

Contact Gary.

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