SlideShare a Scribd company logo
1 of 26
Download to read offline
SVG Overview:
How To Draw, Use And
Animate
Bartosz Bazański
What is SVG?
S V G
SCALABLE VECTOR GRAPHIC
What are SVG good for?
Standard image (PNG, JPEG, etc.)
- complex images
What are SVG good for?
SVG (Scalable Vector Graphic)
- icons and logos,
- charts,
- infographics,
- diagrams,
- models,
- simple illustrations
Conversion
Standard
picture
SVG
Source: https://www.pngtosvg.com
How to draw?
viewbox=“Px
, Py
, maxWidth, maxHeight”
maxWidth
maxHeight
P
xmlns=“http://www.w3.org/2000/svg”
How to draw?
stroke ⇔ border-color
fill ⇔ background-color
stroke-width ⇔ border-width
P1(0,2)
P2(1,4)
P3(4,0)
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
C(x,y)r
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
C(x,y)rx
ry
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P(x,y)
width
height
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P1 P2
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path. P1
P2
P3 P4
P5
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P1 P2
P3 P4
P5 P6
P7
How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
The end result :)
Source: http://codinginparadise.org
How to put it on the page?
● in the image tag,
● in CSS,
● embedded directly into HTML,
● in the object tag.
Source: https://css-tricks.com/using-svg
SVG magic a.k.a Animations
SVG magic a.k.a Animations
SVG magic a.k.a Animations
Source: https://github.com/cgoldsby/LoginCritter
SVG magic a.k.a Animations
Source: http://themaninblue.com/experiment/Blobular
Browser support
Source: https://caniuse.com/#feat=svg
Pros and Cons
Standard image (PNG, JPEG, etc.) SVG (Scalable Vector Graphic)
+ can be cached easily by
the browser,
+ able to present complex
images.
+ highly scalable,
+ easily customizable,
+ light,
+ animations,
+ can be embedded
directly inside html.
− cannot be scaled,
− can be quite heavy,
− limited customizing
options,
− no animations (only GIF),
− separate request.
− limited cache
possibilities,
− can make html code
messy.
Libraries - D3.js
Source: https://github.com/d3/d3
Libraries - React Kawaii
Source: https://github.com/miukimiu/react-kawaii
Resources
● PNG to SVG: https://www.pngtosvg.com,
● Coding in Paradise: http://codinginparadise.org,
● Login Critter: https://github.com/cgoldsby/LoginCritter,
● Blobular: http://themaninblue.com/experiment/Blobular,
● Can I Use It: https://caniuse.com/#feat=svg,
● D3.js: https://github.com/d3/d3,
● React Kawaii: https://github.com/miukimiu/react-kawaii.
Thanks you for your attention.

More Related Content

Similar to SVG Overview - How To Draw, Use and Animate

Similar to SVG Overview - How To Draw, Use and Animate (20)

Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
Learn svg
Learn svgLearn svg
Learn svg
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)SVG (Framsia, 27-SEP-2011)
SVG (Framsia, 27-SEP-2011)
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
 
SVG and the web
SVG and the webSVG and the web
SVG and the web
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
WordCamp Birmingham - Dynamic SVGs with WordPress
WordCamp Birmingham - Dynamic SVGs with WordPressWordCamp Birmingham - Dynamic SVGs with WordPress
WordCamp Birmingham - Dynamic SVGs with WordPress
 
Scalable Vector Graphics for webmapping
Scalable Vector Graphics for webmappingScalable Vector Graphics for webmapping
Scalable Vector Graphics for webmapping
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web Apps
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
Graphics 2D SVG
Graphics 2D SVGGraphics 2D SVG
Graphics 2D SVG
 
S&T Ess Vee Gee 211016
S&T Ess Vee Gee 211016S&T Ess Vee Gee 211016
S&T Ess Vee Gee 211016
 
Html5 SVG
Html5 SVGHtml5 SVG
Html5 SVG
 
Html5 Canvas Detail
Html5 Canvas DetailHtml5 Canvas Detail
Html5 Canvas Detail
 
Animating an svg icon
Animating an svg iconAnimating an svg icon
Animating an svg icon
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
 

More from Visuality

3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutesVisuality
 
Czego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówCzego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówVisuality
 
Introduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsIntroduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsVisuality
 
Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Visuality
 
Introduction to Event Storming
Introduction to Event StormingIntroduction to Event Storming
Introduction to Event StormingVisuality
 
Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Visuality
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...Visuality
 
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiHow to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiVisuality
 
What is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarWhat is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarVisuality
 
Do you really need to reload?
Do you really need to reload?Do you really need to reload?
Do you really need to reload?Visuality
 
How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)Visuality
 
Fantastic stresses and where to find them
Fantastic stresses and where to find themFantastic stresses and where to find them
Fantastic stresses and where to find themVisuality
 
Fuzzy search in Ruby
Fuzzy search in RubyFuzzy search in Ruby
Fuzzy search in RubyVisuality
 
Rfc process in visuality
Rfc process in visualityRfc process in visuality
Rfc process in visualityVisuality
 
GraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsGraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsVisuality
 
Consumer Driven Contracts
Consumer Driven ContractsConsumer Driven Contracts
Consumer Driven ContractsVisuality
 
How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?Visuality
 
React Native - Short introduction
React Native - Short introductionReact Native - Short introduction
React Native - Short introductionVisuality
 
Risk in project management
Risk in project managementRisk in project management
Risk in project managementVisuality
 
Ruby formatters
Ruby formattersRuby formatters
Ruby formattersVisuality
 

More from Visuality (20)

3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes3 issues that made 30 test workers take 40 minutes
3 issues that made 30 test workers take 40 minutes
 
Czego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testówCzego nie robić przy pisaniu testów
Czego nie robić przy pisaniu testów
 
Introduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on RailsIntroduction to Domain-Driven Design in Ruby on Rails
Introduction to Domain-Driven Design in Ruby on Rails
 
Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?Active Record .includes - do you use it consciously?
Active Record .includes - do you use it consciously?
 
Introduction to Event Storming
Introduction to Event StormingIntroduction to Event Storming
Introduction to Event Storming
 
Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?Jak programowanie może pomóc na co dzień?
Jak programowanie może pomóc na co dzień?
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
 
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał ŁęcickiHow to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
How to use AWS SES with Lambda 
in Ruby on Rails application - Michał Łęcicki
 
What is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak AybarWhat is NOT machine learning - Burak Aybar
What is NOT machine learning - Burak Aybar
 
Do you really need to reload?
Do you really need to reload?Do you really need to reload?
Do you really need to reload?
 
How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)How to check valid email? Find using regex(p?)
How to check valid email? Find using regex(p?)
 
Fantastic stresses and where to find them
Fantastic stresses and where to find themFantastic stresses and where to find them
Fantastic stresses and where to find them
 
Fuzzy search in Ruby
Fuzzy search in RubyFuzzy search in Ruby
Fuzzy search in Ruby
 
Rfc process in visuality
Rfc process in visualityRfc process in visuality
Rfc process in visuality
 
GraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basicsGraphQL in Ruby on Rails - basics
GraphQL in Ruby on Rails - basics
 
Consumer Driven Contracts
Consumer Driven ContractsConsumer Driven Contracts
Consumer Driven Contracts
 
How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?How do we use CircleCi in Laterallink?
How do we use CircleCi in Laterallink?
 
React Native - Short introduction
React Native - Short introductionReact Native - Short introduction
React Native - Short introduction
 
Risk in project management
Risk in project managementRisk in project management
Risk in project management
 
Ruby formatters
Ruby formattersRuby formatters
Ruby formatters
 

Recently uploaded

I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirtrahman018755
 
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download NowHUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download NowIdeoholics
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsrahman018755
 
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...Varun Mithran
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证hfkmxufye
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样A
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样Fi
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书A
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理A
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理SS
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样AS
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样AS
 
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理AS
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样AS
 
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书Fir
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsrahman018755
 
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样AS
 
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Managementseank14
 
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...Varun Mithran
 

Recently uploaded (20)

I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download NowHUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
HUMANIZE YOUR BRAND - FREE E-WORKBOOK Download Now
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
 
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...
Subdomain enumeration is a crucial phase in cybersecurity, particularly durin...
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
 
原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样原版定制美国加州大学河滨分校毕业证原件一模一样
原版定制美国加州大学河滨分校毕业证原件一模一样
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
 
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
 
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
一比一定制(USC毕业证书)美国南加州大学毕业证学位证书
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
 
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
 
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
 

SVG Overview - How To Draw, Use and Animate

  • 1. SVG Overview: How To Draw, Use And Animate Bartosz Bazański
  • 2. What is SVG? S V G SCALABLE VECTOR GRAPHIC
  • 3. What are SVG good for? Standard image (PNG, JPEG, etc.) - complex images
  • 4. What are SVG good for? SVG (Scalable Vector Graphic) - icons and logos, - charts, - infographics, - diagrams, - models, - simple illustrations
  • 6. How to draw? viewbox=“Px , Py , maxWidth, maxHeight” maxWidth maxHeight P xmlns=“http://www.w3.org/2000/svg”
  • 7. How to draw? stroke ⇔ border-color fill ⇔ background-color stroke-width ⇔ border-width P1(0,2) P2(1,4) P3(4,0)
  • 8. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. C(x,y)r
  • 9. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. C(x,y)rx ry
  • 10. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. P(x,y) width height
  • 11. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. P1 P2
  • 12. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. P1 P2 P3 P4 P5
  • 13. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path. P1 P2 P3 P4 P5 P6 P7
  • 14. How to draw? ● circle, ● ellipse, ● rectangle, ● line, ● polygon, ● polyline, ● path.
  • 15. The end result :) Source: http://codinginparadise.org
  • 16. How to put it on the page? ● in the image tag, ● in CSS, ● embedded directly into HTML, ● in the object tag. Source: https://css-tricks.com/using-svg
  • 17. SVG magic a.k.a Animations
  • 18. SVG magic a.k.a Animations
  • 19. SVG magic a.k.a Animations Source: https://github.com/cgoldsby/LoginCritter
  • 20. SVG magic a.k.a Animations Source: http://themaninblue.com/experiment/Blobular
  • 22. Pros and Cons Standard image (PNG, JPEG, etc.) SVG (Scalable Vector Graphic) + can be cached easily by the browser, + able to present complex images. + highly scalable, + easily customizable, + light, + animations, + can be embedded directly inside html. − cannot be scaled, − can be quite heavy, − limited customizing options, − no animations (only GIF), − separate request. − limited cache possibilities, − can make html code messy.
  • 23. Libraries - D3.js Source: https://github.com/d3/d3
  • 24. Libraries - React Kawaii Source: https://github.com/miukimiu/react-kawaii
  • 25. Resources ● PNG to SVG: https://www.pngtosvg.com, ● Coding in Paradise: http://codinginparadise.org, ● Login Critter: https://github.com/cgoldsby/LoginCritter, ● Blobular: http://themaninblue.com/experiment/Blobular, ● Can I Use It: https://caniuse.com/#feat=svg, ● D3.js: https://github.com/d3/d3, ● React Kawaii: https://github.com/miukimiu/react-kawaii.
  • 26. Thanks you for your attention.