Soumettre la recherche
Mettre en ligne
SVG (Framsia, 27-SEP-2011)
•
0 j'aime
•
490 vues
Filip Van Laenen
Suivre
Presentasjonen om SVG for Framsia, 27. september 2011
Lire moins
Lire la suite
Technologie
Art & Photos
Signaler
Partager
Signaler
Partager
1 sur 78
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
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
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
Contenu connexe
En vedette
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
En vedette
(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
Similaire à 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
Similaire à 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
Plus 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
Plus 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)
Dernier
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
soniya singh
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
OnBoard
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Dernier
(20)
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
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
Télécharger maintenant