Upload
kyle-evans
View
225
Download
0
Tags:
Embed Size (px)
DESCRIPTION
WordCamp Birmingham 2014 How to create dynamic SVG maps (and other awesome things) with WordPress.
Citation preview
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