Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5: Supplementary Material 

[Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey]

Chapters

Read a summary of each chapter, and find the code for each example and figure:

Part I: SVG on the Web
Graphics from Vectors: An Overview of SVG
The Big Picture: SVG and the Web
A Sense of Style: Working with CSS
Tools of the Trade: Software and Sources to Make SVG Easier

Part II. Drawing with Markup
Building Blocks: Basic Shapes
Following Your Own Path: Custom Shapes
The Art of the Word: Graphical Text Layout and Fonts

Part III. Putting Graphics in Their Place
Scaling Up: Defining Coordinate Systems
A New Point of View: Cropping Embedded SVG Files
Seeing Double: Re-using Content
Transformative Changes: Coordinate System Transformations

Part IV. Artistic Touches
Filling Up To Full: The fill Property, Gradients, & Patterns
Drawing the Lines: Stroke Effects
Marking the Way: Line Markers
Less Is More: Clipping and Masking
Playing with Pixels: Filters and Blend Modes

Part V. SVG as an Application
Beyond the Visible: Metadata for Accessibility and Added Functionality
Drawing on Demand: Interactive SVG
Transitioning in Time: Animation
Good Manners: Best Practices for SVG

SVG and SVG tools

[Styling and animating SVG with CSS]
[w3schools]

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article, which is a modified transcript of a talk I recently gave at CSSconf EU and From the Front, I’ll go over the prerequisites and techniques for working with CSS in SVG... (1)

(1) Styling and animating SVG with CSS

W3C:

Scalable Vector Graphics (SVG) 2

SVG Property index

SVG Styling

Tools:
SVG Editor

SVGOMG web service

Samples:
Iconic (icon set)

Other:

Todd Parker’s presentation

SharePoint Calculated Columns

SharePoint Calculated Columns are powerful tools when creating out-of-the-box solutions. With these columns, we can manipulate other columns in the list item. Below are a few basic functions complete with details on how to utilize them...

Here is my lookup values, for an corporate environment sample, with some conditional formatting, HTML and CSS:

=IF([Owner]="Press Review",CONCATENATE("<DIV style='color: #ffffff; background-color: #ff0000; padding: 2px 4px !important;'>"," ",Owner," ","</DIV>"),IF([Owner]="Decisions",CONCATENATE("<DIV style='color: #ffffff; background-color: #2C5700; padding: 2px 4px !important;'>"," ",Owner," ","</DIV>"),IF([Owner]="Staff Notices",CONCATENATE("<DIV style='color: #ffffff; background-color: #FF9E00; padding: 2px 4px !important;'>"," ",Owner," ","</DIV>"),IF([Owner]="Job Vacancies",CONCATENATE("<DIV style='color: #ffffff; background-color: #009ECE; padding: 2px 4px !important;'>"," ",Owner," ","</DIV>"),IF([Owner]="Training",CONCATENATE("<DIV style='color: #ffffff; background-color: #CE0000; padding: 2px 4px !important;'>"," ",Owner," ","</DIV>")