Skip to content

julia-dizhak/svgExamples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svgExamples

svg examples from different projests as https://codeschool.com/courses/you-me-svg

Groups

Translate

Responsive scalabe graphics

Using a viewbox

  1. copy our viewport values into a nested coordinate system called the viewBox
  2. give our viewport responsive values for height and width
  3. moving viewport values to ViewBox
  4. ViewBox origin X,Y

Paths

Path just another way to draw a shape

start path, draw line in between, close path

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
  • stroke-dashoffset

Symbols to use

Symbol is for Reusable elements

Displaying the icon with a tag use

Viewbox goes on second svg

Symbol tag must be an id, not a class

In order to use Xlink, you need to specify an Xlink namespace on the SVG that will be using XLink.

Can use tag use for external sources (don't work in IE 10)

Svg Accessibility

Label for assets: title and desc

Resources