SlideShare a Scribd company logo
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

More Related Content

Similar to WordCamp Birmingham - Dynamic SVGs with WordPress

RaphaëlJS magic
RaphaëlJS magicRaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
AbhishekMondal42
 
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
Filip Van Laenen
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
SpeedPartner GmbH
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
Akila Iroshan
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
Mike Wilcox
 
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better PlaceUsing SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Patrick Hund
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither
 
SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)
Filip Van Laenen
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
 
SVG introduction
SVG   introductionSVG   introduction
SVG introduction
SathyaseelanK1
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
 
Animating an svg icon
Animating an svg iconAnimating an svg icon
Animating an svg icon
deepbidis
 
SVG Certification
SVG CertificationSVG Certification
SVG Certification
Vskills
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Ontico
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_rendering
Mark Kilgard
 
Learn svg
Learn svgLearn svg
Learn svg
FitBlar Mit
 

Similar to WordCamp Birmingham - Dynamic SVGs with WordPress (20)

RaphaëlJS magic
RaphaëlJS magicRaphaëlJS magic
RaphaëlJS magic
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better PlaceUsing SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
 
SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
SVG introduction
SVG   introductionSVG   introduction
SVG introduction
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Animating an svg icon
Animating an svg iconAnimating an svg icon
Animating an svg icon
 
SVG Certification
SVG CertificationSVG Certification
SVG Certification
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_rendering
 
Learn svg
Learn svgLearn svg
Learn svg
 

Recently uploaded

HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 

Recently uploaded (20)

HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 

WordCamp Birmingham - Dynamic SVGs with WordPress

  • 1. WordPress & SVG Kyle Evans @scubakyle Dynamic Maps and other Awesome Things
  • 2. 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
  • 3. <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>
  • 4. SVGs Are Awesome • Scalable • Small File Size • Style with CSS
  • 5. Using SVGs on the Web <img src=“file.svg”> .icon { width: 100px; height: 100px; background: url(‘icon.svg’); background-size: 100px 100px; } <svg> … </svg>
  • 6. SVG Browser Support C A N I U S E . C O M
  • 8. Using SVG in WordPress
  • 9. Customer Rep Map Challenge: Display map featuring customer representatives and their assigned states and territories
  • 10. Customer Rep Map Static JPG Map Dynamic SVG Map Update through PS Most Updates through WP Not user friendly Interactive Scalable
  • 11. 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
  • 12.
  • 13. Simple Map Play along at wpyall.webdevkyle.com
  • 14. 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
  • 15.
  • 16.
  • 17.
  • 18. <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>
  • 20.
  • 22. 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
  • 23.
  • 24.
  • 25.
  • 28. WordPress & SVG Kyle Evans @scubakyle Dynamic Maps and other Awesome Things