Grow your CSS skills. Land your dream job.

SVG & WordPress Custom Fields

Published by Guest Author

The following is a guest post by Ian Marquette. Ian learned that SVG can have a <text> element, meaning that text could come from a dynamic source while still being able to do cool custom SVG-specific stuff to it.

I was recently working on a WordPress-based website that needed an infographic. Being a proponent of responsive design, I drew the infographic in Illustrator and exported it to SVG for scalability. While tinkering around in the backend I discovered that you can add WordPress custom fields to SVG text elements that allow you to control text-based content from within your WordPress CMS. How awesome is that?

Here I'll explain how I did it, and some further options you might find useful.

Preparing the SVG File

Create the graphic in your vector-editing software of choice. Add placeholder text to the area you'll want to contain user-controlled text. Here I've created a simple graphic for demonstration purposes.


My SVG file. Note that the path is to demonstrate something uniquely SVG. It could be a filter or a stroke or anything else cool that SVG can do.

Now open your SVG file with your preferred editor. You'll have to make some changes to the code. In my example the path had to be changed to a <textpath>, given an ID and linked to using xlink. If I didn't do this, each individual character in my text would have its own tag, coordinates etc.

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
      SVG Text on a path for WordPress!
    </textPath>
  </text>

</svg>

Here's a live demo of some text-on-a-path:

See the Pen JoakC by Chris Coyier (@chriscoyier) on CodePen.

You can just copy and paste the markup straight into a WordPress template. You could also use on of the other methods of using SVG on your page, such as linking to the file as an object. Essentially it needs to be inline SVG, not SVG used as an or background-image.

You'll want to replace the content between the <text> tags with the following code, replacing custom_field with whatever name you want to give yours:

<?php
  global $wp_query;
  $postid = $wp_query->post->ID;
  echo get_post_meta($postid, 'custom_field', true);
  wp_reset_query();
?>

Dropping that within the SVG will look like:

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
       <?php
        global $wp_query;
        $postid = $wp_query->post->ID;
        echo get_post_meta($postid, 'custom_field', true);
        wp_reset_query();
       ?>
    </textPath>
  </text>

</svg>

Now create a custom field in the WordPress CMS with this label and populate it.

Now if you check out that page, you should see the custom text sitting inside your custom SVG graphic! Of course custom fields are just one way to do this that is rather extensible. You could use do the post title this way, menus, or anything else that dynamically spits out text from any CMS.


Custom field added to your SVG

Once it's in there the text can be styled just like regular markup. For instance:

...
<textpath class="text-path" ... >
  ...
.text-path {
  fill: orange;
}

Or any other SVG CSS property. That means using custom fonts via @font-face work just fine. You also have access to nice features such as SVG filters and animation.

Comments

  1. Kyle Johnson
    Permalink to comment#

    What does the browser support look like for this?

    • Jozef Remen
      Permalink to comment#

      Every browser capable of inline SVG should be able to display it. For IE it means IE 9 and higher.

    • Permalink to comment#

      SVG is surprisingly decent, IE 9 and up. -> HTML5 Please

    • Amelia BR
      Permalink to comment#

      And IE8- will still display the raw text, without the SVG effects, so it is still accessible even without SVG support. If you wrapped the whole SVG in a <span> or heading tag, you could even target that for separate styles if you have a legacy-browser targetted stylesheet.

      For semantic/accessibility reasons, if you’re using the SVG effects to dress up a page header, it’s a good idea to wrap the graphic in a meaningful tag anyway.

    • Julian
      Permalink to comment#

      I’m not sure if it’s a codepen thing or not but I’m using Firefox 27.0.1 on Windows and nothing is showing up for me, even if I bust out the full codepen site. Chrome 33 works fine, as does IE 10. That’s all I have installed right now.

  2. Jon Masterson
    Permalink to comment#

    This is pretty goddamned cool. Thanks!

  3. Permalink to comment#

    Great article. I use a similar technique to take user-chosen colours and include them in SVG graphics.

  4. Permalink to comment#

    Minor quibble, the screenshot shows custom_svg_text as WordPress’ custom field but calls custom_field as the key in the PHP call.

    Other than that,great post! IMHO SVG is underserved. I think we’re going to see a lot more of it going forward. It was apparently too ahead of its time. Anyone remember Adobe LiveMotion before Adobe killed it because of Flash? We’ve almost come full circle…

  5. This Compatible with major browser ?

  6. You got me on the WP Code there, sorry. It’s what you get for rushing I guess.

  7. We’ve used this technique in a recent WP website, rufinaehijas.com, if you want to check the browser compatibility.

    The problem we’ve found is to apply kerning on Firefox, because it looks like there is a bug (does anyone know a solution to use kerning=" " on the textPath?).

    It is also very important that, because of the ascender height of typography, size and how wavy the path is, the interior curve of the typography gets stuck in the higher part. We’ve solve it using the vertical positioning with 'dy' attribute to the <tspan> so then we have the path in the middle of the typography.

    <textPath xlink:href="#path1" kerning="5" startOffset="5%">
        <tspan xml:space="preserve" dy="12">
            custom_field
        </tspan>
    </textPath>
    
  8. Permalink to comment#

    Wow, I am going to be all over this! What a great find.

  9. Brandon
    Permalink to comment#

    This is waaay cool!

    SVG is coming in so handy in so many ways these days.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".