Part 4 – SVG and XML, XSLT, XPath, XQuery

Introduction

HTML and its style sheet (.CSS) are great starts to web pages. The World Wide Web Consortium (W3) has concluded that HTML by itself is not enough. It decided to add extensions to the mark-up language to extend its usability. One of the first to be added was the Scallable Vector GGraphics in order to create images that properly grow and shrink with the changes in the webpage size. Then came the extensions to the Mark-Up Language (XML) that allows the user to create and use tags. It was discovered that the standard style-sheet was not enough to handle XML, therefore eXtensible Stylesheet Language was developed with the Transformation notation (XSLT) being added to XSL. We will start with SVG and progress through XML. To implement XML, you have to learn XSLT at the same time.

Table of Contents

  1. SVG Uses
  2. XML and XSLT

SVG Uses

The material here is based on the information in W3Schools SVG tutorial. What you are to do will look like:

My first SVG

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

Some more work needs to be done to have this code work within WordPress.

Sorry, your browser does not support inline SVG.

You may notice the warning message on this page, as WordPress often filters out SVG commands. When you copy the code from the W3Schools page, it should work fine out of WordPress. We will be going through the W3Schools tutorials on SVG, especially to cover fancy text. We will then be going on to do HTML games.

XML and XSLT

XSLT must be learned in conjunction with learning XML.In Visual Studio, you need to create both an XML file and an XSLT file. When you have created both, you can modify them to include what you would like. Or you can do the breakfast example on the World-Wide Web Consortium (W3) website<.