Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/01"

From Publication Station
Line 81: Line 81:


== SVG styled by CSS ==
== SVG styled by CSS ==
Notice that the SVG elements '''all have an id'''.
This allow us to further style the svg images with CSS in the browser.


To do that we shall integrate the SVG in a HTML file.
<source lang="html4strict">
<!DOCTYPE HTML>                                                                                                                                                                               
<html>                                                                                                                                                                                       
  <head>                                                                                                                                                                                     
    <style>                                                                                                                                                                                   
                                                                                                                                                                                             
    </style>                                                                                                                                                                                 
  </head>                                                                                                                                                                                     
  <body>                                                                                                                                                                                     
    <svg                                                                                                                                                                                     
      xmlns:dc="http://purl.org/dc/elements/1.1/"                                                                                                                                           
      xmlns:cc="http://creativecommons.org/ns#"                                                                                                                                             
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"                                                                                                                               
      xmlns:svg="http://www.w3.org/2000/svg"                                                                                                                                                 
      xmlns="http://www.w3.org/2000/svg"                                                                                                                                                     
      version="1.1"                                                                                                                                                                         
      width="300"                                                                                                                                                                           
      height="200"                                                                                                                                                                           
      id="svg3910">                                                                                                                                                                         
      <g id="layer1">                                                                                                                                                                         
        <rect                                                                                                                                                                                 
          width="200"                                                                                                                                                                       
          height="140"                                                                                                                                                                       
          x="0"                                                                                                                                                                             
          y="10"                                                                                                                                                                             
          id="rect3017"                                                                                                                                                                     
          style="fill:#3964c8;stroke:none" />                                                                                                                                               
      </g>                                                                                                                                                                                   
      <path                                                                                                                                                                                   
        d="m 228,125 a 48,51 0 1 1 -97,0 48,51 0 1 1 97.45763,0 z"                                                                                                                           
        id="path3047"                                                                                                                                                                       
        style="fill:#ff60e6;fill-opacity:1;stroke:none" />                                                                                                                                   
    </svg>                                                                                                                                                                                   
  </body>                                                                                                                                                                                     
</html>                                                                                                                                                                                       
       
</source>


== SVG with custom fonts==
== SVG with custom fonts==

Revision as of 15:25, 12 November 2015

SVG

What is SVG?

SVG (Scalable Vector Graphics) is a vector image format.

Contrary to raster graphics or bit maps (an image represented by a rectangular grid of pixels) a vector image is a description of its geometric shapes, or drawing instructions, which the viewing

program will draw on the screen.

Image from http://apogeesigns.com/faq/what-is-a-vector-graphic/

SVG Characteristics

  • scalable - zooms wont pixelate or degrade the image quality
  • text-based image format - like a webpage you can view and change the source code of an SVG image
  • editable in vector drawing software (Inkscape, Adobe Illustrator)
  • easily included within an HTML document
  • syntax similar to HTML

SVG: image and text

Squarecircle.svg

This SVG image is the representation of the following SVG code:

You can use the inspector, a text-editor, or a vector drawing program to change the image.

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="300"
   height="200"
   id="svg3910">
  <g
     transform="translate(0,-852.36218)"
     id="layer1">
    <rect
       width="200"
       height="140"
       x="92.85714"
       y="908.07648"
       id="rect3017"
       style="opacity:1;fill:#3964c8;stroke:none" />
    <path
       d="m 254.28571,269.50504 a 74.285713,71.428574 0 1 1 -148.57142,0 74.285713,71.428574 0 1 1 148.57142,0 z"
       transform="translate(-95.714287,658.57142)"
       id="path3015"
       style="opacity:1;fill:#ff64c8;stroke:none" />
  </g>
</svg>

dimensions

Notice the height and width arguments in the example above. They determine how large the svg drawing space will be, in pixels.

width="300"
height="200"

SVG basic shapes

As you can see in the example above an SVG is made up from basic shapes, that combined, styled, transformed and grouped can form complex drawings.

The basic shapes are:

  • line
 <line x1="40" y1="20" x2="80" y2="20" style="stroke-width: 10; stroke: black;"/>
  • rectangle
<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/>
  • circle
 <circle cx="30" cy="30" r="20" style="stroke: black; fill: red;"/>
  • ellipse
 <ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;"/>
  • polygon - series of points that describe a geometric area to be filled and outlined
 <polygon points="15,10  55, 10  45, 20  5, 20"
   style="fill: red; stroke: black;"/>
  • group - the group <g> element is not a shape, but element that gathers all of its child elements into one block

SVG styled by CSS

Notice that the SVG elements all have an id. This allow us to further style the svg images with CSS in the browser.

To do that we shall integrate the SVG in a HTML file.

<!DOCTYPE HTML>                                                                                                                                                                                
<html>                                                                                                                                                                                         
  <head>                                                                                                                                                                                       
    <style>                                                                                                                                                                                    
                                                                                                                                                                                               
    </style>                                                                                                                                                                                   
  </head>                                                                                                                                                                                      
  <body>                                                                                                                                                                                       
    <svg                                                                                                                                                                                       
       xmlns:dc="http://purl.org/dc/elements/1.1/"                                                                                                                                             
       xmlns:cc="http://creativecommons.org/ns#"                                                                                                                                               
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"                                                                                                                                 
       xmlns:svg="http://www.w3.org/2000/svg"                                                                                                                                                  
       xmlns="http://www.w3.org/2000/svg"                                                                                                                                                      
       version="1.1"                                                                                                                                                                           
       width="300"                                                                                                                                                                             
       height="200"                                                                                                                                                                            
       id="svg3910">                                                                                                                                                                           
      <g id="layer1">                                                                                                                                                                          
        <rect                                                                                                                                                                                  
           width="200"                                                                                                                                                                         
           height="140"                                                                                                                                                                        
           x="0"                                                                                                                                                                               
           y="10"                                                                                                                                                                              
           id="rect3017"                                                                                                                                                                       
           style="fill:#3964c8;stroke:none" />                                                                                                                                                 
      </g>                                                                                                                                                                                     
      <path                                                                                                                                                                                    
         d="m 228,125 a 48,51 0 1 1 -97,0 48,51 0 1 1 97.45763,0 z"                                                                                                                            
         id="path3047"                                                                                                                                                                         
         style="fill:#ff60e6;fill-opacity:1;stroke:none" />                                                                                                                                    
    </svg>                                                                                                                                                                                     
  </body>                                                                                                                                                                                      
</html>

SVG with custom fonts

This is just the basics. We'll want to manipulate the SVG drawings further, not just style them with CSS, but:

  • add drawing elements,
  • remove them,
  • turn elements into links,
  • transform the image based on user interaction
  • create a new image every time a user visits the site,
  • etc.

To create those actions with need a scripting language for the browser.

(WHAT IS A SCRIPTING LANGUAGE?)