wordcamp birmingham - dynamic svgs with wordpress

WordPress & SVG

Kyle Evans @scubakyle

Dynamic Maps and other Awesome Things

SVG

Scalable Vector Graphics

an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.

M O Z I L L A D E V E L O P E R N E T W O R K

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="959" height=“593"> <path d="m 631.30647,460.41572 -1.4906,-14.3215 -2.74824,-18.75264 0.16166,-14.06449 0.8083,-31.03885 -0.16166,-16.65106 0.16509,-6.41906 44.48448,-3.61945 -0.1478,2.18242 0.16166,2.1016 0.64665,3.39487 3.39488,7.92137 2.4249,9.86131 1.45495,6.14311 1.6166,4.84982 1.45496,6.95141 2.10158,6.30476 2.58657,3.39489 0.48498,3.39486 1.93994,0.80831 0.16166,2.10159 -1.77828,4.84982 -0.48498,3.23322 -0.16166,1.93992 1.61662,4.36485 0.32332,5.33479 -0.80832,2.42492 0.64666,0.8083 1.45494,0.8083 0.32814,2.88882 -5.59766,-0.35355 -6.78975,0.64665 -25.5424,2.90988 -10.41156,1.40677 -0.22138,2.8774 1.77827,1.77827 2.58657,1.93992 0.58086,7.93544 -5.54206,2.5729 -2.74822,-0.32332 2.74822,-1.93993 0,-0.96996 -3.07154,-5.98144 -2.26325,-0.64664 -1.45495,4.36483 -1.29328,2.74823 -0.64664,-0.16166 -2.74823,0 z" id="AL" class="state" /> </svg>

SVGs Are Awesome

• Scalable • Small File Size • Style with CSS

Using SVGs on the Web

<img src=“file.svg”>

.icon { width: 100px; height: 100px; background: url(‘icon.svg’); background-size: 100px 100px; }

<svg> … </svg>

SVG Browser Support

C A N I U S E . C O M

More SVG Info

http://css-tricks.com/mega-list-svg-information/

Using SVG in WordPress

Customer Rep Map

Challenge: Display map featuring customer representatives and

their assigned states and territories

Customer Rep Map

Static JPG Map Dynamic SVG Map

Update through PS Most Updates through WP

Not user friendly Interactive

Scalable

Plan

Custom post type for SVG shapes (territories)

Custom post type for customer reps

Connect reps with territories using Posts 2 Posts plugin

Output reps with connected territories

Simple Map

Play along at wpyall.webdevkyle.com

Territories CPT

Store SVG shapes in excerpt or custom field

Add <svg> before loop, </svg> after loop

Output only SVG shapes in loop

Create SVG Map

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="959" height="593" viewbox="0 0 959 593"> ! <?php while ( have_posts() ) : the_post(); ?> ! <a xlink:href="<?php the_permalink(); ?>"> <?php the_excerpt(); ?> </a> ! <?php endwhile; ?> !</svg>

wpyall.webdevkyle.com

Rep Map

Rep Shortcode

Connect reps to territories with Posts 2 Posts

Loop through reps, outputting related shapes

Loop through remaining shapes

Style each rep’s territories

Create CPT for reps

Other Uses

wpyall.webdevkyle.com

WordPress & SVG

Kyle Evans @scubakyle

Dynamic Maps and other Awesome Things