SlideShare uma empresa Scribd logo
1 de 78
Baixar para ler offline
Scalable Vector Graphics
          (SVG)
       Filip van Laenen
            Framsia
          2011-09-27



                           © Computas AS 27.09.11
Agenda


• Del I
   • Hva er SVG?
   • Hvorfor SVG?
   • Verktøy
   • Eksempler

• Del II
   • Gjennomgang av SVG


                      2   © Computas AS 27.09.11
Min bakgrunn


• Java, (Smalltalk), (Perl), Ruby
• XML
   • XSLT, XSD, navnerom
• HTML
   • CSS




                         3          © Computas AS 27.09.11
Historikk og varianter


• 1999: Versjon 1.0
   • PGML (Precision Graphics Markup Language)
   • VML (Vector Markup Language)
• 2001: Versjon 1.0 recommendation
• 2003: Versjon 1.1 recommendation
   • SVG Mobile: SVG Basic & SVG Tiny
• 2008: SVG Tiny 1.2 recommendation
• 2011: Versjon 1.1 SE recommendation
• Versjon 1.2 working draft
• SVG 2.0
                         4               © Computas AS 27.09.11
Hva er SVG?


• Scalable Vector Graphics
   • Vektorbasert grafikk på nett
   • Ingen kvalitetstap ved skalering
• XML-basert
   • Integrerer med DOM og XSL
• Hvert element kan animeres




                         5              © Computas AS 27.09.11
Hvorfor SVG?


• Skalerer
• Mindre filer
   • Bedre komprimering enn JPEG eller PNG
   • Enda bedre komprimering med SVGZ
• Åpen standard, del av HTML5
   • Ren XML
   • Kan leses og endres av mange verktøy
• Tekst kan selekteres og indekseres



                       6                © Computas AS 27.09.11
Hvorfor SVG? (forts.)


• In-line i HTML-dokumenter mulig
   • Deling av CSS
• Animasjon og interaksjon
   • SMIL
   • ECMAScript
   • Andre scriptspråk




                        7           © Computas AS 27.09.11
Hvorfor ikke SVG?


• Gjett…




                    8   © Computas AS 27.09.11
Nettleserstøtte for SVG


•   Konqueror
•   Google Chrome
•   Opera
•   Safari
•   Firefox (siden 4.0)
•   Internet Explorer 9




                          9   © Computas AS 27.09.11
SVGs konkurrenter


•   Flash
•   VML†
•   XAML†
•   Silverlight(†)
•   JPEG: Fotobilder
•   PNG (GIF): Pikselbaserte tegninger

• Visio-diagrammer
• Powerpoint

                          10             © Computas AS 27.09.11
SVG versus bitmaps




                     11   © Computas AS 27.09.11
Verktøy


• Lage SVG
   • Min favoritt: Inkscape
      • http://inkscape.org/
   • Enhver tekst- eller XML-editor
   • Eksport fra andre program
• Se SVG
   • Enhver nettleser




                         12           © Computas AS 27.09.11
Eksempel 1




             13   © Computas AS 27.09.11
Eksempel 2




             14   © Computas AS 27.09.11
Eksempel 3




             15   © Computas AS 27.09.11
Open Clip Art Library




                        16   © Computas AS 27.09.11
Eksempel 4




             17   © Computas AS 27.09.11
Eksempel 5




             18   © Computas AS 27.09.11
Eksempel 6




             19   © Computas AS 27.09.11
Lære mer om SVG


• W3C Recommendation
   • http://www.w3.org/TR/SVG/Overview.html
• SVG Basics Tutorial
   • http://www.svgbasics.com/index.html

• Open Clip Art Library
   • http://www.openclipart.org/
• Inkscape
   • http://www.inkscape.org/

                       20             © Computas AS 27.09.11
Spørsmål?
Pause
Gjennomgang av SVG


•   Circle, rect, opacity, rx, ry
•   Line, polygon
•   Polyline, path, marker
•   Text, tspan
•   Stroke
•   Linear og radial gradient
•   Mønstre
•   Grupper
•   Filtre
•   Animasjon

                            23      © Computas AS 27.09.11
SVG-kodesnutt 1.1: Circle


<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="150" height="100" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red"/>

</svg>


                          24                  © Computas AS 27.09.11
SVG-kodesnutt 1.2: Ellipse


<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="150" height="100" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <ellipse cx="100" cy="50" rx="40" ry="30"
      stroke="black" stroke-width="2" fill="red"/>

</svg>


                          25                  © Computas AS 27.09.11
SVG-kodesnutt 1.3: Rect


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <rect width="300" height="100"
      style="fill:rgb(0,0,255);stroke-width:1;
             stroke:rgb(0,0,0)"/>

</svg>


                          26                    © Computas AS 27.09.11
SVG-kodesnutt 1.4: Opacity


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <rect x="20" y="20" width="250" height="250"
      style="fill:blue;stroke:pink;
             stroke-width:5;
             fill-opacity:0.1;stroke-opacity:0.9"/>

</svg>
                          27                    © Computas AS 27.09.11
SVG-kodesnutt 1.5: Rx og ry


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <rect x="20" y="20" rx="20" ry="20" width="250"
      height="100"
      style="fill:red;stroke:black;
             stroke-width:5;opacity:0.5"/>

</svg>
                          28                    © Computas AS 27.09.11
Oppgave 1


• Gul sirkel, grønn kant
• Blå firkant, 50% gjennomsiktig
• Rød firkant, runde hjørner, svart kant




                         29                © Computas AS 27.09.11
SVG-kodesnutt 2.1: Line


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <line x1="0" y1="0" x2="300" y2="300"
      stroke="red" stroke-width="2"/>

</svg>



                          30                    © Computas AS 27.09.11
SVG-kodesnutt 2.2: Polygon


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <polygon points="220,100 300,210 170,250"
      fill="#cccccc" stroke="#000000"
      stroke-width="1"/>

</svg>


                          31                    © Computas AS 27.09.11
Oppgave 2


• Kumulativt diagram
• X- og Y-akse
• Blå, gul og rød data




                         32   © Computas AS 27.09.11
SVG-kodesnutt 3.1: Polyline (1)


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <polyline
      points="0,0 0,20 20,20 20,40 40,40 40,60"
      fill="none" stroke="red" stroke-width="2"/>

</svg>


                          33                    © Computas AS 27.09.11
SVG-kodesnutt 3.2: Polyline (2)


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <polyline
      points="0,0 0,20 20,20 20,40 40,40 40,60"
      fill="blue" stroke="red" stroke-width="2"/>

</svg>


                          34                    © Computas AS 27.09.11
SVG-kodesnutt 3.3: Path (1)


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="400" height="400" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

   <path d="M250 150 L150 350 L350 350 Z" />

</svg>




                          35                   © Computas AS 27.09.11
SVG Path-kommandoer


•   M/m: Moveto
•   L/l: Lineto
•   H/h: Horizontal lineto
•   V/v: Vertical lineto
•   C/c: Curveto
•   S/s: Smooth curveto
•   Q/q: Quadratic Bézier curve
•   T/t: Smooth quadratic Bézier curveto
•   A/a: Elliptical arc
•   Z/z: Closepath

                         36                © Computas AS 27.09.11
Elliptical Arc


• Rx og ry: Radii
• X-axis-rotation: Rotasjonen for X-aksen
• Large-arc-flag:
   • 0 hvis mindre enn 180°
   • 1 hvis mer enn 180°
• Sweep-flag:
   • 0 hvis negativ retning
   • 1 hvis positiv retning
• X og y: Sluttpunktet

                        37                  © Computas AS 27.09.11
SVG-kodesnutt 3.4: Path (2)



<svg width="700" height="500" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <path d="M300 200 A200 150 30 0 0 400 300"
       fill="none" stroke="black" stroke-width="2"/>
   <path d="M300 200 A200 150 30 0 1 400 300"
       fill="none" stroke="red" stroke-width="2"/>
   <path d="M300 200 A200 150 30 1 0 400 300"
       fill="none" stroke="green" stroke-width="2"/>
   <path d="M300 200 A200 150 30 1 1 400 300"
       fill="none" stroke="blue" stroke-width="2"/>
</svg>


                          38                  © Computas AS 27.09.11
SVG-kodesnutt 3.5: Marker (1)


<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
…
    <path d="M 200 250 L 700 100 L 900 350 L 1200 400"
       fill="none" stroke="black" stroke-width="50"
       marker-start="url(#StartMarker)"
       marker-mid="url(#MidMarker)"
       marker-end="url(#EndMarker)"/>
</svg>




                            39                    © Computas AS 27.09.11
SVG-kodesnutt 3.5: Marker (2)


<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <defs>
       <marker id="StartMarker" viewBox="0 0 12 12"
          refX="12" refY="6" markerWidth="3"
          markerHeight="3" stroke="green" stroke-width="2"
          fill="none" orient="auto">
             <circle cx="6" cy="6" r="5"/>
       </marker>
        …
    </defs>
…




                            40                    © Computas AS 27.09.11
Oppgave 3.1


• Samme som oppgave 2, men linjediagram




                      41                  © Computas AS 27.09.11
Oppgave 3.2


• Samme som oppgave 3.1, men med markører




                     42               © Computas AS 27.09.11
Oppgave 3.3




              43   © Computas AS 27.09.11
SVG-kodesnutt 4.1: Text


<svg width="150" height="60" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="25" fill="navy" font-size="15">
       Lorem ipsum
   </text>
   <text x="10" y="25" dx="5" dy="15" fill="red"
          font-size="18">
       Dolor sit amet
   </text>
</svg>




                          44                 © Computas AS 27.09.11
SVG-kodesnutt 4.2: Tspan


<svg width="150" height="60" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <text x="30" y="25" fill="navy" font-size="15">
       <tspan>
          Lorem ipsum
       </tspan>
       <tspan dx="-50" dy="15" font-style="italic">
          Dolor sit amet
       </tspan>
   </text>
</svg>



                          45                  © Computas AS 27.09.11
Formattering av tekst


•   Font-family
•   Font-size
•   Font-style: normal, italic eller oblique
•   Font-variant: normal, small-caps
•   Font-weight: normal, bold, bolder, lighter, …
•   Text-anchor: start, middle, end
•   Text-decoration: none, underline, overline, …




                          46                 © Computas AS 27.09.11
Oppgave 4




            47   © Computas AS 27.09.11
Eksempel 4




             48   © Computas AS 27.09.11
Stroke


• Stroke-width
• Stroke-linecap: butt, round, square
• Stroke-linejoin: miter, round, bevel
   • Stroke-miterlimit
• Stroke-dasharray
• Stroke-dashoffset
• Stroke-opacity




                         49              © Computas AS 27.09.11
Oppgave 5


• Samme som oppgave 3.1
   • Blå stiplet linje
   • Rød linje gjennomsiktig




                        50     © Computas AS 27.09.11
Eksempel 6




             51   © Computas AS 27.09.11
SVG-kodesnutt 6.1: Linear Gradient (1)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <defs>
       <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="100%" stop-color="yellow"/>
       </linearGradient>
   </defs>
   <rect x="50" y="50" width="500" height="300"
       fill="url(#MyGradient)" stroke="black"
       stroke-width="2"/>
</svg>


                          52                  © Computas AS 27.09.11
SVG-kodesnutt 6.2: Linear Gradient (2)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <defs>
       <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="50%" stop-color="yellow"/>
          <stop offset="100%" stop-color="green"/>
       </linearGradient>
   </defs>
   <rect x="50" y="50" width="500" height="300"
       fill="url(#MyGradient)" stroke="black"
       stroke-width="2"/>
</svg>
                          53                  © Computas AS 27.09.11
SVG-kodesnutt 6.3: Linear Gradient (3)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <defs>
       <linearGradient id="MyGradient">
          <stop offset="20%" stop-color="orange"/>
          <stop offset="50%" stop-color="yellow"/>
          <stop offset="80%" stop-color="green"/>
       </linearGradient>
   </defs>
   <rect x="50" y="50" width="500" height="300"
       fill="url(#MyGradient)" stroke="black"
       stroke-width="2"/>
</svg>
                          54                  © Computas AS 27.09.11
SVG-kodesnutt 6.4: Linear Gradient (4)


<svg width="600" height="400" version="1.1"
      xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="MyGradient"
             x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="50%" stop-color="yellow"/>
          <stop offset="100%" stop-color="green"/>
      </linearGradient>
   </defs>




                          55                  © Computas AS 27.09.11
SVG-kodesnutt 6.5: Linear Gradient (5)


<svg width="600" height="400" version="1.1"
      xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="MyGradient"
             x1="0%" y1="0%" x2="100%" y2="50%">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="50%" stop-color="yellow"/>
          <stop offset="100%" stop-color="green"/>
      </linearGradient>
   </defs>




                          56                  © Computas AS 27.09.11
SVG-kodesnutt 6.6: Linear Gradient (6)


<svg width="600" height="400" version="1.1"
      xmlns="http://www.w3.org/2000/svg">
   <defs>
      <linearGradient id="MyGradient"
             x1="0%" y1="0%" x2="100%" y2="50%">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="50%" stop-color="yellow"/>
          <stop offset="100%" stop-color="green"
             stop-opacity=".3"/>
      </linearGradient>
   </defs>



                          57                  © Computas AS 27.09.11
Oppgave 6.1




              58   © Computas AS 27.09.11
SVG-kodesnutt 6.7: Radial Gradient (1)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <defs>
       <radialGradient id="MyGradient"
             cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="100%" stop-color="yellow"/>
       </radialGradient>
   </defs>
   <circle cx="300" cy="200" r="180" stroke="black"
       stroke-width="2" fill="url(#MyGradient)"/>
</svg>


                          59                 © Computas AS 27.09.11
SVG-kodesnutt 6.8: Radial Gradient (2)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <defs>
       <radialGradient id="MyGradient" cx="50%"
             cy="50%" r="50%" fx="25%" fy="25%">
          <stop offset="0%" stop-color="orange"/>
          <stop offset="100%" stop-color="yellow"/>
       </radialGradient>
   </defs>
   <circle cx="300" cy="200" r="180" stroke="black"
       stroke-width="2" fill="url(#MyGradient)"/>
</svg>


                          60                 © Computas AS 27.09.11
Oppgave 6.2


• Samme som oppgave 4
   • Bruk gradientUnits="userSpaceOnUse"




                       61                  © Computas AS 27.09.11
Mønstre




          62   © Computas AS 27.09.11
Grupper


• Gruppering av objekter til ett objekt
• Attributter gjelder for hele gruppen
   • Farger
   • Opasitet
   • Gradiënter




                        63                © Computas AS 27.09.11
Filtre


• Primitiver:
   • Belysning og glans
   • Skygge
   • Fargetransformasjoner
   • Flytting
   • Turbulens
• Filtermatematikk
   • Pluss
   • Blending

                       64    © Computas AS 27.09.11
SVG-kodesnutt 7.1: Filter (1)


<svg width="600" height="400" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
   <filter id="f1" width="150%" height="150%">
       <feOffset result="offOut" in="SourceGraphic"
          dx="10" dy="10"/>
       <feBlend in="SourceGraphic" in2="offOut"
          mode="normal"/>
   </filter>
   <rect filter="url(#f1)" x="40" y="40"
       rx="40" ry="40" width="400" height="200"
       style="fill:red;stroke:black;
          stroke-width:5;opacity:0.5"/>
</svg>
                          65                  © Computas AS 27.09.11
SVG-kodesnutt 7.2: Filter (2)


  <filter id="f2" width="150%" height="150%">
     <feOffset result="offOut" in="SourceGraphic"
        dx="10" dy="10"/>
     <feGaussianBlur result="blurOut" in="offOut"
        stdDeviation="5"/>
     <feBlend in="SourceGraphic" in2="blurOut"
        mode="normal"/>
  </filter>




                         66                 © Computas AS 27.09.11
Filtre: Kilder


•   Resultatet fra andre filtre
•   SourceGraphic
•   SourceAlpha
•   BackgroundImage
•   BackgroundAlpha
•   FillPaint
•   StrokePaint




                                  67   © Computas AS 27.09.11
SVG-kodesnutt 7.3: Filter (3)


  <filter id="f3" width="150%" height="150%">
     <feOffset result="offOut" in="SourceAlpha"
        dx="10" dy="10"/>
     <feGaussianBlur result="blurOut" in="offOut"
        stdDeviation="5"/>
     <feBlend in="SourceGraphic" in2="blurOut"
        mode="normal"/>
  </filter>




                         68                 © Computas AS 27.09.11
SVG-kodesnutt 7.4: Filter (4)


  <filter id="f4" width="150%" height="150%">
     <feOffset result="offOut" in="SourceGraphic"
        dx="10" dy="10"/>
     <feColorMatrix result="matrixOut" in="offOut"
        type="matrix"
        values="0.2 0 0 0 0
                0 0.2 0 0 0
                0 0 0.2 0 0
                0 0 0 1 0"/>
     <feGaussianBlur result="blurOut"
        in="matrixOut" stdDeviation="5"/>
     <feBlend in="SourceGraphic" in2="blurOut"
        mode="normal"/>
  </filter>              69                 © Computas AS 27.09.11
Transformasjon av farger


• Matrix:
  • Transformasjon per kanal
  • Svart er 0



            [][                             ][]
            ̃
            R   a 00   a01   a 02   a03   a04   R
            ̃
            G   a10    a11   a12    a13   a14   G
            ̃
            B = a20    a21   a22    a23   a24 × B
            ̃
            A   a30    a31   a32    a33   a34   A
            1    0      0     0      0     1    1


• Alternativer:
   • Saturate, HueRotate, LuminanceToAlpha

                              70                    © Computas AS 27.09.11
Animasjon


• Animasjon-elementer
• Scripting
   • ECMAScript m.m.
• SMIL
   • Synchronized Multimedia Integration
     Language




                        71                 © Computas AS 27.09.11
SVG-kodesnutt 8.1: Animate


  <circle cx="100" cy="50" stroke="green"
        stroke-width="2" fill="yellow">
     <animate attributeName="r" attributeType="XML"
        begin="0s" dur="9s" from="20" to="60"
        fill="freeze"/>
  </circle>
  <rect x="20" y="30" width="200" height="100"
        fill="blue" opacity="0.5">
     <animate attributeName="opacity"
        attributeType="XML" begin="0s" dur="9s"
        fill="remove" from="0.2" to="1"/>
  </rect>


                         72                 © Computas AS 27.09.11
SVG-kodesnutt 8.2: AnimateTransform


  <rect x="20" y="30" width="200" height="100"
        fill="blue">
     <animateTransform attributeName="transform"
        attributeType="XML" type="scale"
        from="1" to="2" dur="5s" fill="freeze"/>
  </rect>
  <rect x="10" y="70" width="100" height="100"
        fill="red">
     <animateTransform attributeName="transform"
        attributeType="XML" type="rotate"
        from="0" to="360" dur="5s"
        repeatCount="indefinite"/>
  </rect>
                         73                 © Computas AS 27.09.11
SVG-kodesnutt 8.3: OnClick


<rect x="10" y="70" width="100" height="100"
   fill="red"
   onclick="evt.target.setAttribute('fill','green')"
/>




                          74                 © Computas AS 27.09.11
SVG-kodesnutt 8.4: OnLoad


<svg … onload="StartAnimation(evt)">
   <script type="application/ecmascript"><![CDATA[
      …
      function StartAnimation(evt) {
         blue_rect =
evt.target.ownerDocument.getElementById("BlueRect");
         blue_rect.setAttribute("transform",
            "scale(" + scalefactor + ")");
      …
      }
   ]]></script>
   <rect id="BlueRect" x="20" y="30"
      width="20" height="10" fill="blue"/>

                          75                 © Computas AS 27.09.11
Og enda mer…


•   Transform og viewBox
•   Clipping, masking og compositing
•   Fonts
•   Glyphs
•   Linking
•   Metadata
•   Utvidbarhet




                         76            © Computas AS 27.09.11
Lære mer om SVG


• W3C Recommendation
   • http://www.w3.org/TR/SVG/Overview.html
• SVG Basics Tutorial
   • http://www.svgbasics.com/index.html

• Open Clip Art Library
   • http://www.openclipart.org/
• Inkscape
   • http://www.inkscape.org/

                       77             © Computas AS 27.09.11
Spørsmål?




Contact:

    Computas AS                    Tel 67 83 10 00
    Lysaker Torg 45, pb 482        Fax 67 83 10 01
    1327 Lysaker                   Org.nr: NO 986 352 325 MVA
                                   www.computas.com




                              78                      © Computas AS 27.09.11

Mais conteúdo relacionado

Destaque (8)

Inspiration
InspirationInspiration
Inspiration
 
Presentació Bea
Presentació BeaPresentació Bea
Presentació Bea
 
9789888058723
97898880587239789888058723
9789888058723
 
2
22
2
 
.
..
.
 
Inteligencias multiples
Inteligencias multiplesInteligencias multiples
Inteligencias multiples
 
Toyo
ToyoToyo
Toyo
 
MANEJO DE LA INFORMACION II
 MANEJO DE LA INFORMACION II MANEJO DE LA INFORMACION II
MANEJO DE LA INFORMACION II
 

Semelhante a SVG (Framsia, 27-SEP-2011)

Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?Mike Wilcox
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisBoris Zapolsky
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicAkila Iroshan
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Librariesseamusjr
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersPhil Reither
 
Drawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the WebDrawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary
 
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better PlaceUsing SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better PlacePatrick Hund
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsShweta Sadawarte
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) Sara Soueidan
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSGil Fink
 

Semelhante a SVG (Framsia, 27-SEP-2011) (20)

Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
SVG and the web
SVG and the webSVG and the web
SVG and the web
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
 
SVG introduction
SVG   introductionSVG   introduction
SVG introduction
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
 
Drawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the WebDrawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the Web
 
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better PlaceUsing SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
SVG overview
SVG overviewSVG overview
SVG overview
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
Svghtml5 Meetup
Svghtml5 MeetupSvghtml5 Meetup
Svghtml5 Meetup
 

Mais de Filip Van Laenen

How JSR 385 could have saved the Mars Climate Orbiter
How JSR 385 could have saved the Mars Climate OrbiterHow JSR 385 could have saved the Mars Climate Orbiter
How JSR 385 could have saved the Mars Climate OrbiterFilip Van Laenen
 
How JSR-385 Could Have Saved the Mars Climate Orbiter
How JSR-385 Could Have Saved the Mars Climate OrbiterHow JSR-385 Could Have Saved the Mars Climate Orbiter
How JSR-385 Could Have Saved the Mars Climate OrbiterFilip Van Laenen
 
Clouds with Trenches and Sharp Edges
Clouds with Trenches and Sharp EdgesClouds with Trenches and Sharp Edges
Clouds with Trenches and Sharp EdgesFilip Van Laenen
 
Become an SVG Architect, not a PowerPoint Architect
Become an SVG Architect, not a PowerPoint ArchitectBecome an SVG Architect, not a PowerPoint Architect
Become an SVG Architect, not a PowerPoint ArchitectFilip Van Laenen
 
Mutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kodeMutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kodeFilip Van Laenen
 
Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?Filip Van Laenen
 
Five Inconvenient Truths about REST
Five Inconvenient Truths about RESTFive Inconvenient Truths about REST
Five Inconvenient Truths about RESTFilip Van Laenen
 
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...How Free Data Can Drive Some of the Monkey Business Out of Political Journali...
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...Filip Van Laenen
 
Oop 2015 – Mutation Testing
Oop 2015 – Mutation TestingOop 2015 – Mutation Testing
Oop 2015 – Mutation TestingFilip Van Laenen
 
#NoEstimates – Smidig 2014
 #NoEstimates – Smidig 2014 #NoEstimates – Smidig 2014
#NoEstimates – Smidig 2014Filip Van Laenen
 
#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014Filip Van Laenen
 
Tre ubeleilige sannheter om REST
Tre ubeleilige sannheter om RESTTre ubeleilige sannheter om REST
Tre ubeleilige sannheter om RESTFilip Van Laenen
 
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)Mutation Testing with PIT (Booster 2014, 2014-MAR-13)
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)Filip Van Laenen
 
Hvorfor stole på e-valg 2011/13?
Hvorfor stole på e-valg 2011/13?Hvorfor stole på e-valg 2011/13?
Hvorfor stole på e-valg 2011/13?Filip Van Laenen
 
Mutation testing (OOP 2012, 2012-JAN-24)
Mutation testing (OOP 2012, 2012-JAN-24)Mutation testing (OOP 2012, 2012-JAN-24)
Mutation testing (OOP 2012, 2012-JAN-24)Filip Van Laenen
 

Mais de Filip Van Laenen (18)

Drawing for IT Architects
Drawing for IT ArchitectsDrawing for IT Architects
Drawing for IT Architects
 
How JSR 385 could have saved the Mars Climate Orbiter
How JSR 385 could have saved the Mars Climate OrbiterHow JSR 385 could have saved the Mars Climate Orbiter
How JSR 385 could have saved the Mars Climate Orbiter
 
How JSR-385 Could Have Saved the Mars Climate Orbiter
How JSR-385 Could Have Saved the Mars Climate OrbiterHow JSR-385 Could Have Saved the Mars Climate Orbiter
How JSR-385 Could Have Saved the Mars Climate Orbiter
 
Clouds with Trenches and Sharp Edges
Clouds with Trenches and Sharp EdgesClouds with Trenches and Sharp Edges
Clouds with Trenches and Sharp Edges
 
Become an SVG Architect, not a PowerPoint Architect
Become an SVG Architect, not a PowerPoint ArchitectBecome an SVG Architect, not a PowerPoint Architect
Become an SVG Architect, not a PowerPoint Architect
 
Dial M for Mutation
Dial M for MutationDial M for Mutation
Dial M for Mutation
 
Mutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kodeMutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kode
 
Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?
 
Five Inconvenient Truths about REST
Five Inconvenient Truths about RESTFive Inconvenient Truths about REST
Five Inconvenient Truths about REST
 
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...How Free Data Can Drive Some of the Monkey Business Out of Political Journali...
How Free Data Can Drive Some of the Monkey Business Out of Political Journali...
 
Oop 2015 – Mutation Testing
Oop 2015 – Mutation TestingOop 2015 – Mutation Testing
Oop 2015 – Mutation Testing
 
#NoEstimates – Smidig 2014
 #NoEstimates – Smidig 2014 #NoEstimates – Smidig 2014
#NoEstimates – Smidig 2014
 
#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014
 
Tre ubeleilige sannheter om REST
Tre ubeleilige sannheter om RESTTre ubeleilige sannheter om REST
Tre ubeleilige sannheter om REST
 
What Architects Really Do
What Architects Really DoWhat Architects Really Do
What Architects Really Do
 
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)Mutation Testing with PIT (Booster 2014, 2014-MAR-13)
Mutation Testing with PIT (Booster 2014, 2014-MAR-13)
 
Hvorfor stole på e-valg 2011/13?
Hvorfor stole på e-valg 2011/13?Hvorfor stole på e-valg 2011/13?
Hvorfor stole på e-valg 2011/13?
 
Mutation testing (OOP 2012, 2012-JAN-24)
Mutation testing (OOP 2012, 2012-JAN-24)Mutation testing (OOP 2012, 2012-JAN-24)
Mutation testing (OOP 2012, 2012-JAN-24)
 

Último

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Último (20)

UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

SVG (Framsia, 27-SEP-2011)

  • 1. Scalable Vector Graphics (SVG) Filip van Laenen Framsia 2011-09-27 © Computas AS 27.09.11
  • 2. Agenda • Del I • Hva er SVG? • Hvorfor SVG? • Verktøy • Eksempler • Del II • Gjennomgang av SVG 2 © Computas AS 27.09.11
  • 3. Min bakgrunn • Java, (Smalltalk), (Perl), Ruby • XML • XSLT, XSD, navnerom • HTML • CSS 3 © Computas AS 27.09.11
  • 4. Historikk og varianter • 1999: Versjon 1.0 • PGML (Precision Graphics Markup Language) • VML (Vector Markup Language) • 2001: Versjon 1.0 recommendation • 2003: Versjon 1.1 recommendation • SVG Mobile: SVG Basic & SVG Tiny • 2008: SVG Tiny 1.2 recommendation • 2011: Versjon 1.1 SE recommendation • Versjon 1.2 working draft • SVG 2.0 4 © Computas AS 27.09.11
  • 5. Hva er SVG? • Scalable Vector Graphics • Vektorbasert grafikk på nett • Ingen kvalitetstap ved skalering • XML-basert • Integrerer med DOM og XSL • Hvert element kan animeres 5 © Computas AS 27.09.11
  • 6. Hvorfor SVG? • Skalerer • Mindre filer • Bedre komprimering enn JPEG eller PNG • Enda bedre komprimering med SVGZ • Åpen standard, del av HTML5 • Ren XML • Kan leses og endres av mange verktøy • Tekst kan selekteres og indekseres 6 © Computas AS 27.09.11
  • 7. Hvorfor SVG? (forts.) • In-line i HTML-dokumenter mulig • Deling av CSS • Animasjon og interaksjon • SMIL • ECMAScript • Andre scriptspråk 7 © Computas AS 27.09.11
  • 8. Hvorfor ikke SVG? • Gjett… 8 © Computas AS 27.09.11
  • 9. Nettleserstøtte for SVG • Konqueror • Google Chrome • Opera • Safari • Firefox (siden 4.0) • Internet Explorer 9 9 © Computas AS 27.09.11
  • 10. SVGs konkurrenter • Flash • VML† • XAML† • Silverlight(†) • JPEG: Fotobilder • PNG (GIF): Pikselbaserte tegninger • Visio-diagrammer • Powerpoint 10 © Computas AS 27.09.11
  • 11. SVG versus bitmaps 11 © Computas AS 27.09.11
  • 12. Verktøy • Lage SVG • Min favoritt: Inkscape • http://inkscape.org/ • Enhver tekst- eller XML-editor • Eksport fra andre program • Se SVG • Enhver nettleser 12 © Computas AS 27.09.11
  • 13. Eksempel 1 13 © Computas AS 27.09.11
  • 14. Eksempel 2 14 © Computas AS 27.09.11
  • 15. Eksempel 3 15 © Computas AS 27.09.11
  • 16. Open Clip Art Library 16 © Computas AS 27.09.11
  • 17. Eksempel 4 17 © Computas AS 27.09.11
  • 18. Eksempel 5 18 © Computas AS 27.09.11
  • 19. Eksempel 6 19 © Computas AS 27.09.11
  • 20. Lære mer om SVG • W3C Recommendation • http://www.w3.org/TR/SVG/Overview.html • SVG Basics Tutorial • http://www.svgbasics.com/index.html • Open Clip Art Library • http://www.openclipart.org/ • Inkscape • http://www.inkscape.org/ 20 © Computas AS 27.09.11
  • 22. Pause
  • 23. Gjennomgang av SVG • Circle, rect, opacity, rx, ry • Line, polygon • Polyline, path, marker • Text, tspan • Stroke • Linear og radial gradient • Mønstre • Grupper • Filtre • Animasjon 23 © Computas AS 27.09.11
  • 24. SVG-kodesnutt 1.1: Circle <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> 24 © Computas AS 27.09.11
  • 25. SVG-kodesnutt 1.2: Ellipse <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="40" ry="30" stroke="black" stroke-width="2" fill="red"/> </svg> 25 © Computas AS 27.09.11
  • 26. SVG-kodesnutt 1.3: Rect <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/> </svg> 26 © Computas AS 27.09.11
  • 27. SVG-kodesnutt 1.4: Opacity <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink; stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/> </svg> 27 © Computas AS 27.09.11
  • 28. SVG-kodesnutt 1.5: Rx og ry <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> </svg> 28 © Computas AS 27.09.11
  • 29. Oppgave 1 • Gul sirkel, grønn kant • Blå firkant, 50% gjennomsiktig • Rød firkant, runde hjørner, svart kant 29 © Computas AS 27.09.11
  • 30. SVG-kodesnutt 2.1: Line <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="2"/> </svg> 30 © Computas AS 27.09.11
  • 31. SVG-kodesnutt 2.2: Polygon <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="220,100 300,210 170,250" fill="#cccccc" stroke="#000000" stroke-width="1"/> </svg> 31 © Computas AS 27.09.11
  • 32. Oppgave 2 • Kumulativt diagram • X- og Y-akse • Blå, gul og rød data 32 © Computas AS 27.09.11
  • 33. SVG-kodesnutt 3.1: Polyline (1) <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="none" stroke="red" stroke-width="2"/> </svg> 33 © Computas AS 27.09.11
  • 34. SVG-kodesnutt 3.2: Polyline (2) <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="blue" stroke="red" stroke-width="2"/> </svg> 34 © Computas AS 27.09.11
  • 35. SVG-kodesnutt 3.3: Path (1) <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M250 150 L150 350 L350 350 Z" /> </svg> 35 © Computas AS 27.09.11
  • 36. SVG Path-kommandoer • M/m: Moveto • L/l: Lineto • H/h: Horizontal lineto • V/v: Vertical lineto • C/c: Curveto • S/s: Smooth curveto • Q/q: Quadratic Bézier curve • T/t: Smooth quadratic Bézier curveto • A/a: Elliptical arc • Z/z: Closepath 36 © Computas AS 27.09.11
  • 37. Elliptical Arc • Rx og ry: Radii • X-axis-rotation: Rotasjonen for X-aksen • Large-arc-flag: • 0 hvis mindre enn 180° • 1 hvis mer enn 180° • Sweep-flag: • 0 hvis negativ retning • 1 hvis positiv retning • X og y: Sluttpunktet 37 © Computas AS 27.09.11
  • 38. SVG-kodesnutt 3.4: Path (2) <svg width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M300 200 A200 150 30 0 0 400 300" fill="none" stroke="black" stroke-width="2"/> <path d="M300 200 A200 150 30 0 1 400 300" fill="none" stroke="red" stroke-width="2"/> <path d="M300 200 A200 150 30 1 0 400 300" fill="none" stroke="green" stroke-width="2"/> <path d="M300 200 A200 150 30 1 1 400 300" fill="none" stroke="blue" stroke-width="2"/> </svg> 38 © Computas AS 27.09.11
  • 39. SVG-kodesnutt 3.5: Marker (1) <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> … <path d="M 200 250 L 700 100 L 900 350 L 1200 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"/> </svg> 39 © Computas AS 27.09.11
  • 40. SVG-kodesnutt 3.5: Marker (2) <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="StartMarker" viewBox="0 0 12 12" refX="12" refY="6" markerWidth="3" markerHeight="3" stroke="green" stroke-width="2" fill="none" orient="auto"> <circle cx="6" cy="6" r="5"/> </marker> … </defs> … 40 © Computas AS 27.09.11
  • 41. Oppgave 3.1 • Samme som oppgave 2, men linjediagram 41 © Computas AS 27.09.11
  • 42. Oppgave 3.2 • Samme som oppgave 3.1, men med markører 42 © Computas AS 27.09.11
  • 43. Oppgave 3.3 43 © Computas AS 27.09.11
  • 44. SVG-kodesnutt 4.1: Text <svg width="150" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="25" fill="navy" font-size="15"> Lorem ipsum </text> <text x="10" y="25" dx="5" dy="15" fill="red" font-size="18"> Dolor sit amet </text> </svg> 44 © Computas AS 27.09.11
  • 45. SVG-kodesnutt 4.2: Tspan <svg width="150" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="30" y="25" fill="navy" font-size="15"> <tspan> Lorem ipsum </tspan> <tspan dx="-50" dy="15" font-style="italic"> Dolor sit amet </tspan> </text> </svg> 45 © Computas AS 27.09.11
  • 46. Formattering av tekst • Font-family • Font-size • Font-style: normal, italic eller oblique • Font-variant: normal, small-caps • Font-weight: normal, bold, bolder, lighter, … • Text-anchor: start, middle, end • Text-decoration: none, underline, overline, … 46 © Computas AS 27.09.11
  • 47. Oppgave 4 47 © Computas AS 27.09.11
  • 48. Eksempel 4 48 © Computas AS 27.09.11
  • 49. Stroke • Stroke-width • Stroke-linecap: butt, round, square • Stroke-linejoin: miter, round, bevel • Stroke-miterlimit • Stroke-dasharray • Stroke-dashoffset • Stroke-opacity 49 © Computas AS 27.09.11
  • 50. Oppgave 5 • Samme som oppgave 3.1 • Blå stiplet linje • Rød linje gjennomsiktig 50 © Computas AS 27.09.11
  • 51. Eksempel 6 51 © Computas AS 27.09.11
  • 52. SVG-kodesnutt 6.1: Linear Gradient (1) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/> </svg> 52 © Computas AS 27.09.11
  • 53. SVG-kodesnutt 6.2: Linear Gradient (2) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/> </svg> 53 © Computas AS 27.09.11
  • 54. SVG-kodesnutt 6.3: Linear Gradient (3) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="20%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="80%" stop-color="green"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/> </svg> 54 © Computas AS 27.09.11
  • 55. SVG-kodesnutt 6.4: Linear Gradient (4) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> 55 © Computas AS 27.09.11
  • 56. SVG-kodesnutt 6.5: Linear Gradient (5) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> 56 © Computas AS 27.09.11
  • 57. SVG-kodesnutt 6.6: Linear Gradient (6) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green" stop-opacity=".3"/> </linearGradient> </defs> 57 © Computas AS 27.09.11
  • 58. Oppgave 6.1 58 © Computas AS 27.09.11
  • 59. SVG-kodesnutt 6.7: Radial Gradient (1) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="300" cy="200" r="180" stroke="black" stroke-width="2" fill="url(#MyGradient)"/> </svg> 59 © Computas AS 27.09.11
  • 60. SVG-kodesnutt 6.8: Radial Gradient (2) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="300" cy="200" r="180" stroke="black" stroke-width="2" fill="url(#MyGradient)"/> </svg> 60 © Computas AS 27.09.11
  • 61. Oppgave 6.2 • Samme som oppgave 4 • Bruk gradientUnits="userSpaceOnUse" 61 © Computas AS 27.09.11
  • 62. Mønstre 62 © Computas AS 27.09.11
  • 63. Grupper • Gruppering av objekter til ett objekt • Attributter gjelder for hele gruppen • Farger • Opasitet • Gradiënter 63 © Computas AS 27.09.11
  • 64. Filtre • Primitiver: • Belysning og glans • Skygge • Fargetransformasjoner • Flytting • Turbulens • Filtermatematikk • Pluss • Blending 64 © Computas AS 27.09.11
  • 65. SVG-kodesnutt 7.1: Filter (1) <svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="f1" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feBlend in="SourceGraphic" in2="offOut" mode="normal"/> </filter> <rect filter="url(#f1)" x="40" y="40" rx="40" ry="40" width="400" height="200" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> </svg> 65 © Computas AS 27.09.11
  • 66. SVG-kodesnutt 7.2: Filter (2) <filter id="f2" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 66 © Computas AS 27.09.11
  • 67. Filtre: Kilder • Resultatet fra andre filtre • SourceGraphic • SourceAlpha • BackgroundImage • BackgroundAlpha • FillPaint • StrokePaint 67 © Computas AS 27.09.11
  • 68. SVG-kodesnutt 7.3: Filter (3) <filter id="f3" width="150%" height="150%"> <feOffset result="offOut" in="SourceAlpha" dx="10" dy="10"/> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 68 © Computas AS 27.09.11
  • 69. SVG-kodesnutt 7.4: Filter (4) <filter id="f4" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 69 © Computas AS 27.09.11
  • 70. Transformasjon av farger • Matrix: • Transformasjon per kanal • Svart er 0 [][ ][] ̃ R a 00 a01 a 02 a03 a04 R ̃ G a10 a11 a12 a13 a14 G ̃ B = a20 a21 a22 a23 a24 × B ̃ A a30 a31 a32 a33 a34 A 1 0 0 0 0 1 1 • Alternativer: • Saturate, HueRotate, LuminanceToAlpha 70 © Computas AS 27.09.11
  • 71. Animasjon • Animasjon-elementer • Scripting • ECMAScript m.m. • SMIL • Synchronized Multimedia Integration Language 71 © Computas AS 27.09.11
  • 72. SVG-kodesnutt 8.1: Animate <circle cx="100" cy="50" stroke="green" stroke-width="2" fill="yellow"> <animate attributeName="r" attributeType="XML" begin="0s" dur="9s" from="20" to="60" fill="freeze"/> </circle> <rect x="20" y="30" width="200" height="100" fill="blue" opacity="0.5"> <animate attributeName="opacity" attributeType="XML" begin="0s" dur="9s" fill="remove" from="0.2" to="1"/> </rect> 72 © Computas AS 27.09.11
  • 73. SVG-kodesnutt 8.2: AnimateTransform <rect x="20" y="30" width="200" height="100" fill="blue"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="5s" fill="freeze"/> </rect> <rect x="10" y="70" width="100" height="100" fill="red"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite"/> </rect> 73 © Computas AS 27.09.11
  • 74. SVG-kodesnutt 8.3: OnClick <rect x="10" y="70" width="100" height="100" fill="red" onclick="evt.target.setAttribute('fill','green')" /> 74 © Computas AS 27.09.11
  • 75. SVG-kodesnutt 8.4: OnLoad <svg … onload="StartAnimation(evt)"> <script type="application/ecmascript"><![CDATA[ … function StartAnimation(evt) { blue_rect = evt.target.ownerDocument.getElementById("BlueRect"); blue_rect.setAttribute("transform", "scale(" + scalefactor + ")"); … } ]]></script> <rect id="BlueRect" x="20" y="30" width="20" height="10" fill="blue"/> 75 © Computas AS 27.09.11
  • 76. Og enda mer… • Transform og viewBox • Clipping, masking og compositing • Fonts • Glyphs • Linking • Metadata • Utvidbarhet 76 © Computas AS 27.09.11
  • 77. Lære mer om SVG • W3C Recommendation • http://www.w3.org/TR/SVG/Overview.html • SVG Basics Tutorial • http://www.svgbasics.com/index.html • Open Clip Art Library • http://www.openclipart.org/ • Inkscape • http://www.inkscape.org/ 77 © Computas AS 27.09.11
  • 78. Spørsmål? Contact: Computas AS Tel 67 83 10 00 Lysaker Torg 45, pb 482 Fax 67 83 10 01 1327 Lysaker Org.nr: NO 986 352 325 MVA www.computas.com 78 © Computas AS 27.09.11