Enviar pesquisa
Carregar
SVG (Framsia, 27-SEP-2011)
•
0 gostou
•
490 visualizações
Filip Van Laenen
Seguir
Presentasjonen om SVG for Framsia, 27. september 2011
Leia menos
Leia mais
Tecnologia
Arte e fotografia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 78
Baixar agora
Baixar para ler offline
Recomendados
SVG (Devoxx 2011, 2011-NOV-14)
SVG (Devoxx 2011, 2011-NOV-14)
Filip Van Laenen
HTML5 and SVG
HTML5 and SVG
yarcub
Svg
Svg
Steve Fort
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
Next generation Graphics: SVG
Next generation Graphics: SVG
David Corbacho Román
Html5
Html5
Mehdi Jalal
CSS Animations & Transitions
CSS Animations & Transitions
Edward Meehan
Mais conteúdo relacionado
Destaque
Inspiration
Inspiration
james665rich
Presentació Bea
Presentació Bea
beatrizaviles
9789888058723
9789888058723
TAAZE 讀冊生活
2
2
Sergey Mikhalev
.
.
Céu Silva
Inteligencias multiples
Inteligencias multiples
WilmerOrtiz1032
Toyo
Toyo
toyo123
MANEJO DE LA INFORMACION II
MANEJO DE LA INFORMACION II
alejandronett
Destaque
(8)
Inspiration
Inspiration
Presentació Bea
Presentació Bea
9789888058723
9789888058723
2
2
.
.
Inteligencias multiples
Inteligencias multiples
Toyo
Toyo
MANEJO DE LA INFORMACION II
MANEJO DE LA INFORMACION II
Semelhante a SVG (Framsia, 27-SEP-2011)
Thats Not Flash?
Thats Not Flash?
Mike Wilcox
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
SVG and the web
SVG and the web
Ken Shoufer Web Design
SVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
Akila Iroshan
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
Html 5 svg
Html 5 svg
AbhishekMondal42
Svg Overview And Js Libraries
Svg Overview And Js Libraries
seamusjr
SVG introduction
SVG introduction
SathyaseelanK1
Html5 more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither
Drawing a Circle Three Ways: Generating Graphics for the Web
Drawing a Circle Three Ways: Generating Graphics for the Web
Cloudinary
Using SVG Graphics to Make the World Wide Web a Better Place
Using SVG Graphics to Make the World Wide Web a Better Place
Patrick Hund
SVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
Shweta Sadawarte
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
SVG overview
SVG overview
Satoshi Watanabe
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Sara Soueidan
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Gil Fink
Svghtml5 Meetup
Svghtml5 Meetup
Oswald Campesato
Semelhante a SVG (Framsia, 27-SEP-2011)
(20)
Thats Not Flash?
Thats Not Flash?
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
SVG and the web
SVG and the web
SVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
Web Vector Graphics
Web Vector Graphics
Html 5 svg
Html 5 svg
Svg Overview And Js Libraries
Svg Overview And Js Libraries
SVG introduction
SVG introduction
Html5 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 Painters
Drawing 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 Place
SVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
SVG overview
SVG overview
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Svghtml5 Meetup
Svghtml5 Meetup
Mais de Filip Van Laenen
Drawing for IT Architects
Drawing for IT Architects
Filip Van Laenen
How JSR 385 could have saved the Mars Climate Orbiter
How JSR 385 could have saved the Mars Climate Orbiter
Filip Van Laenen
How JSR-385 Could Have Saved the Mars Climate Orbiter
How JSR-385 Could Have Saved the Mars Climate Orbiter
Filip Van Laenen
Clouds with Trenches and Sharp Edges
Clouds with Trenches and Sharp Edges
Filip Van Laenen
Become an SVG Architect, not a PowerPoint Architect
Become an SVG Architect, not a PowerPoint Architect
Filip Van Laenen
Dial M for Mutation
Dial M for Mutation
Filip Van Laenen
Mutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kode
Filip Van Laenen
Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?
Filip Van Laenen
Five Inconvenient Truths about REST
Five Inconvenient Truths about REST
Filip 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...
Filip Van Laenen
Oop 2015 – Mutation Testing
Oop 2015 – Mutation Testing
Filip Van Laenen
#NoEstimates – Smidig 2014
#NoEstimates – Smidig 2014
Filip Van Laenen
#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014
Filip Van Laenen
Tre ubeleilige sannheter om REST
Tre ubeleilige sannheter om REST
Filip Van Laenen
What Architects Really Do
What Architects Really Do
Filip Van Laenen
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?
Filip Van Laenen
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 Architects
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 Orbiter
How JSR-385 Could Have Saved the Mars Climate Orbiter
Clouds 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 Architect
Dial M for Mutation
Dial M for Mutation
Mutasjonstesting – Lag bugs for å få bedre kode
Mutasjonstesting – Lag bugs for å få bedre kode
Hvem kommer til å vinne kommunevalget?
Hvem kommer til å vinne kommunevalget?
Five 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...
Oop 2015 – Mutation Testing
Oop 2015 – Mutation Testing
#NoEstimates – Smidig 2014
#NoEstimates – Smidig 2014
#NoEstimates – Javazone 2014
#NoEstimates – Javazone 2014
Tre ubeleilige sannheter om REST
Tre ubeleilige sannheter om REST
What 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)
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)
Último
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
DianaGray10
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Tarek Kalaji
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.pptx
GDSC PJATK
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
infogdgmi
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Matsuo Lab
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 Workflows
Safe Software
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
IES VE
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
Daniel Santiago Silva Capera
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
Jamie (Taka) Wang
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
Precisely
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 2024
SkyPlanner
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
Seth Reyes
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
DianaGray10
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
DianaGray10
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-2019
IES VE
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
dgelyza
Último
(20)
UiPath 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 PBX
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.pptx
Videogame 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).pptx
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 Workflows
Using 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.pdf
20230202 - 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 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...
Salesforce 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 Hazards
UiPath 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.pdf
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-2019
COMPUTER 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
21.
Spørsmål?
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
Baixar agora