Design the Web: CSS-Controlled SVG with PHP
31mAdvanced2015-11-06
Authors

Chris Converse
Applies design and UX principles to technology
Course details
Learn how to use PHP, HTML, and CSS to dynamically modify styles in your scalable vector graphics (SVGs) in this installment of Design the Web—project-based courses for web professionals. Chris Converse explores techniques to modify the colors, visibility, and even stroke values of your images, using the PHP header function and query variables to modify CSS rules in an SVG. This technique is a great way to build a library of reusable graphics for any PHP-based website or content management system, including WordPress, Drupal, and Joomla! The exercise files are free to all members. Download them to start practicing this technique today.
Skills covered
Web GraphicsPHPCSSWeb StandardsWeb DesignFront-End Web DevelopmentLimited SeriesWeb DevelopmentProgramming LanguagesOpen SourceSoftware Development
Concepts
0. Introduction
- 01 - Introduction to this course
- 02 - What you'll need to complete this course
- 03 - About the exercise files
Preparing the HTML Content and Structure
- 04 - Beginning the project
- 05 - Returning a PHP file as an SVG file
- 06 - Passing and receiving the first query string variable
- 07 - Passing and receiving a second query string variable
- 08 - Setting up default colors for the SVG file
- 09 - Changing colors with a mouseover
- 10 - Encoding special characters in a URL
Related courses
- Design the Web: Getting CSS from Photoshop
- Design the Web: Graphics and CSS Pseudo-Elements
- Design the Web: Styling a Table
- Design the Web: Creating and Protecting Email Links
- Design the Web: SVG Rollovers with CSS
- Design the Web: Creating a Sortable Table
- Design the Web: Slice Tool
- Learning Materialize CSS