SVG: Versatile Vector Design.

Uploaded on:
SVG: Adaptable Vector Representation ITK 352.05, Fall 2003 Amy Jones What is SVG? An element new design standard discharged by the W3C in 2001 Consolidates focal points of numerous more seasoned illustrations measures into one organization Adds new abilities not known not before
Slide 1

SVG: Scalable Vector Graphics ITK 352.05, Fall 2003 Amy Jones

Slide 2

What is SVG? An element new representation standard discharged by the W3C in 2001 Combines focal points of numerous more established design measures into one configuration Adds new capacities not known not before Growing in prominence, and accepting more backing from drawing projects and programs

Slide 3

Why do we require SVG? Constrained abilities of bitmaps: Bitmaps can lose extensive determination when resized A superb bitmap will likewise accompany a huge record measure However, due to far reaching program bolster, the lion\'s share of representation on the Internet today are bitmaps

Slide 4

Why do we require SVG? (cont.) Limited abilities of vectors: Graphics in light of scientific recipes, making vectors not able to bolster photographic-quality pictures Never got across the board program bolster However, dissimilar to bitmaps, vectors don\'t lose picture quality when resized

Slide 5

History of SVG Mid-1990’s: Adobe, Microsoft, and Macromedia started to grow new web realistic measures New standard would need to: Be determination autonomous Maintain quality on diverse size screens Maintain a little document size Receive broad program bolster Support photographic-quality pictures

Slide 6

History of SVG (cont.) Macromedia was the first organization to accomplish another web representation standard, when it acquired Future Splash in 1996, and named the innovation Flash The business still felt that another standard was required, on the grounds that Flash needed inherent program bolster, it was exclusive, and it was intended for movements, not static design

Slide 7

History of SVG (cont.) 1998: Adobe submitted Precision Graphics Markup Language (PGML) to W3C as a XML-based realistic standard 1998: Microsoft submitted Vector Markup Language (VML) to the W3C, which Macromedia additionally upheld 1999: W3C chose PGML and VML would be converged into another standard, and Microsoft and Macromedia deserted advancement of the new standard around then

Slide 8

History of SVG (cont.) September 2001: SVG turned into a formal W3C suggestion Late 2001: Adobe asserted it had proprietorship and eminence rights on SVG January 2002: The Internet group challenged Adobe’s case, and Adobe surrendered the issue January 2003: SVG 1.1 discharged by W3C

Slide 9

Development Text Editor Adobe Illustrator 10 Corel Draw 11 Jasc WebDraw Viewing Browser support: Mozilla, Amaya Promised future backing by IE and Netscape SVG Viewers from: Adobe Corel IBM Apache Current SVG Tools

Slide 10

Advantages of SVG Text-based: simple to code and alter Open source: sovereignty free, permit free Written in XML: the eventual fate of IT Official standard from the W3C Accessibility: adaptability & screen perusers Searching: in light of content, available by XML-mindful web crawlers Can be overhauled from a database Browser bolster either locally or through a viewer

Slide 11

Advantages of SVG (cont.) Can be sent out from geographic data frameworks (GIS) programming Supports activity and intelligence Supports channels, changes, cutting, and covers Supports straightforwardness Can be altered in well known drawing projects, for example, Adobe Illustrator and Corel Draw

Slide 12

SVG Foundations in XML A SVG is composed in XML 1.0 sentence structure in a word processor, or produced by a drawing system SVG keeps XML’s strict coding guidelines SVG contains components and characteristics, as does XML

Slide 13

SVG Coordinate System SVG depends on numerical equations, as conventional vector design SVG components are put on the X and Y pivot

Slide 14

XML Code for a Simple SVG <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-/W3C//DTD SVG 20010909//EN" ""> <svg width="600" height="400"> <rect x="1" y="1" width="598" height="398" style="fill:#00FF00"/> <text x="210" y="25" style="fill:#FFFFFF; stroke:none; textual style family:Arial, sans-serif; text style size:22"> Hello World! </text> </svg>

Slide 15

Advanced Capabilities of SVG Paths: used to draw 2D components of any shape or size by characterizing focuses Transformations: permit pivot and scaling of an item Clipping and Masking: give the capacity to change an object’s fill impact Filters: give impacts, for example, drop shadows (connected with bitmaps) Animation/Interactivity: can be expert with SVG labels, or with outer script records

Slide 16

SVG and Other Web Technologies CSS: can characterize the designing of some or all components in a report HTML/XHTML: permit implanted SVG utilizing the article label Java (customer side): can show, produce, and redesign from DB JSP, .NET, and so forth (server side): can show, create, and upgrade from DB

Slide 17

SVG Examples SVG versus bitmap: scaling & picture quality Interactivity and content Based hunting SVG backing down photographic-quality pictures through inserted bitmaps

Slide 18

The Future of SVG Becoming generally known in the business Gaining backing from more advancement and survey items Seen as having extraordinary potential in portable and remote gadgets Potential as web design standard will rely on upon far reaching program bolster

Slide 19

Questions or Comments ?

Slide 20


View more...