目录搜索
Scalable Vector Graphics (SVG) 1.1 (Second Edition)1 Introduction1.1 About SVG1.2 SVG MIME type1.3 SVG Namespace1.4 Compatibility with Other Standards Efforts1.5 Terminology1.6 Definitions2 Concepts2.1 Explaining the name: SVG2.2 Important SVG concepts2.3 Options for using SVG in Web pages3 Rendering Model3.1 Introduction3.2 The painters model3.3 Rendering Order3.4 How groups are rendered3.5 How elements are rendered3.6 Types of graphics elements3.6.1 Painting shapes and text3.6.2 Painting raster images3.7 Filtering painted regions3.8 Clipping3.9 Parent Compositing4 Basic Data Types and Interfaces4.1 Syntax4.2 Basic data types4.3 Real number precision4.4 Recognized color keyword names4.5 Basic DOM interfaces4.5.1 Interface SVGElement4.5.2 Interface SVGAnimatedBoolean4.5.3 Interface SVGAnimatedString4.5.4 Interface SVGStringList4.5.5 Interface SVGAnimatedEnumeration4.5.6 Interface SVGAnimatedInteger4.5.7 Interface SVGNumber4.5.8 Interface SVGAnimatedNumber4.5.9 Interface SVGNumberList4.5.10 Interface SVGAnimatedNumberList4.5.11 Interface SVGLength4.5.12 Interface SVGAnimatedLength4.5.13 Interface SVGLengthList4.5.14 Interface SVGAnimatedLengthList4.5.15 Interface SVGAngle4.5.16 Interface SVGAnimatedAngle4.5.17 Interface SVGColor4.5.18 Interface SVGICCColor4.5.19 Interface SVGRect4.5.20 Interface SVGAnimatedRect4.5.21 Interface SVGUnitTypes4.5.22 Interface SVGStylable4.5.23 Interface SVGLocatable4.5.24 Interface SVGTransformable4.5.25 Interface SVGTests4.5.26 Interface SVGLangSpace4.5.27 Interface SVGExternalResourcesRequired4.5.28 Interface SVGFitToViewBox4.5.29 Interface SVGZoomAndPan4.5.30 Interface SVGViewSpec4.5.31 Interface SVGURIReference4.5.32 Interface SVGCSSRule4.5.33 Interface SVGRenderingIntent5 Document Structure5.1 Defining an SVG document fragment: the 憇vg?element5.1.1 Overview5.1.2 The 憇vg?element5.2 Grouping: the 慻?element5.2.1 Overview5.2.2 The 慻?element5.3 Defining content for reuse5.3.1 Overview5.3.2 The 慸efs?element5.4 The 慸esc?and 憈itle?elements5.5 The 憇ymbol?element5.6 The 憉se?element5.7 The 慽mage?element5.8 Conditional processing5.8.1 Conditional processing overview5.8.2 The 憇witch?element5.8.3 The 憆equiredFeatures?attribute5.8.4 The 憆equiredExtensions?attribute5.8.5 The 憇ystemLanguage?attribute5.8.6 Applicability of test attributes5.9 Specifying whether external resources are required for proper rendering5.10 Common attributes5.10.1 Attributes common to all elements: 慽d?and 憍ml:base?5.10.2 The 憍ml:lang?and 憍ml:space?attributes5.11 DOM interfaces5.11.1 Interface SVGDocument5.11.2 Interface SVGSVGElement5.11.3 Interface SVGGElement5.11.4 Interface SVGDefsElement5.11.5 Interface SVGDescElement5.11.6 Interface SVGTitleElement5.11.7 Interface SVGSymbolElement5.11.8 Interface SVGUseElement5.11.9 Interface SVGElementInstance5.11.10 Interface SVGElementInstanceList5.11.11 Interface SVGImageElement5.11.12 Interface SVGSwitchElement5.11.13 Interface GetSVGDocument6 Styling6.1 SVG's styling properties6.2 Usage scenarios for styling6.3 Alternative ways to specify styling properties6.4 Specifying properties using the presentation attributes6.5 Styling with XSL6.6 Styling with CSS6.7 Case sensitivity of property names and values6.8 Facilities from CSS and XSL used by SVG6.9 Referencing external style sheets6.10 The 憇tyle?element6.11 The 慶lass?attribute6.12 The 憇tyle?attribute6.13 Specifying the default style sheet language6.14 Property inheritance6.15 The scope/range of styles6.16 User agent style sheet6.17 Aural style sheets6.18 DOM interfaces6.18.1 Interface SVGStyleElement7 Coordinate Systems7.1 Introduction7.2 The initial viewport7.3 The initial coordinate system7.4 Coordinate system transformations7.5 Nested transformations7.6 The 憈ransform?attribute7.7 The 憊iewBox?attribute7.8 The 憄reserveAspectRatio?attribute7.9 Establishing a new viewport7.10 Units7.11 Object bounding box units7.12 Intrinsic sizing properties of the viewport of SVG content7.13 Geographic coordinate systems7.14 The 憇vg:transform?attribute7.15 DOM interfaces7.15.1 Interface SVGPoint7.15.2 Interface SVGPointList7.15.3 Interface SVGMatrix7.15.4 Interface SVGTransform7.15.5 Interface SVGTransformList7.15.6 Interface SVGAnimatedTransformList7.15.7 Interface SVGPreserveAspectRatio7.15.8 Interface SVGAnimatedPreserveAspectRatio8 Paths8.1 Introduction8.2 The 憄ath?element8.3 Path data8.3.1 General information about path data8.3.2 The "moveto" commands8.3.3 The "closepath" command8.3.4 The "lineto" commands8.3.5 The curve commands8.3.6 The cubic B閦ier curve commands8.3.7 The quadratic B閦ier curve commands8.3.8 The elliptical arc curve commands8.3.9 The grammar for path data8.4 Distance along a path8.5 DOM interfaces8.5.1 Interface SVGPathSeg8.5.2 Interface SVGPathSegClosePath8.5.3 Interface SVGPathSegMovetoAbs8.5.4 Interface SVGPathSegMovetoRel8.5.5 Interface SVGPathSegLinetoAbs8.5.6 Interface SVGPathSegLinetoRel8.5.7 Interface SVGPathSegCurvetoCubicAbs8.5.8 Interface SVGPathSegCurvetoCubicRel8.5.9 Interface SVGPathSegCurvetoQuadraticAbs8.5.10 Interface SVGPathSegCurvetoQuadraticRel8.5.11 Interface SVGPathSegArcAbs8.5.12 Interface SVGPathSegArcRel8.5.13 Interface SVGPathSegLinetoHorizontalAbs8.5.14 Interface SVGPathSegLinetoHorizontalRel8.5.15 Interface SVGPathSegLinetoVerticalAbs8.5.16 Interface SVGPathSegLinetoVerticalRel8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel8.5.21 Interface SVGPathSegList8.5.22 Interface SVGAnimatedPathData8.5.23 Interface SVGPathElement9 Basic Shapes9.1 Introduction9.2 The 憆ect?element9.3 The 慶ircle?element9.4 The 慹llipse?element9.5 The 憀ine?element9.6 The 憄olyline?element9.7 The 憄olygon?element9.7.1 The grammar for points specifications in 憄olyline?and 憄olygon?elements9.8 DOM interfaces9.8.1 Interface SVGRectElement9.8.2 Interface SVGCircleElement9.8.3 Interface SVGEllipseElement9.8.4 Interface SVGLineElement9.8.5 Interface SVGAnimatedPoints9.8.6 Interface SVGPolylineElement9.8.7 Interface SVGPolygonElement10 Text10.1 Introduction10.2 Characters and their corresponding glyphs10.3 Fonts10.4 The 憈ext?element10.5 The 憈span?element10.6 The 憈ref?element10.7 Text layout10.7.1 Text layout introduction10.7.2 Setting the inline-progression-direction10.7.3 Glyph orientation within a text run10.7.4 Relationship with bidirectionality10.8 Text rendering order10.9 Alignment properties10.9.1 Text alignment properties10.9.2 Baseline alignment properties10.10 Font selection properties10.11 Spacing properties10.12 Text decoration10.13 Text on a path10.13.1 Introduction to text on a path10.13.2 The 憈extPath?element10.13.3 Text on a path layout rules10.14 Alternate glyphs10.14.1 The 慳ltGlyph?element10.14.2 The 慳ltGlyphDef? 慳ltGlyphItem?and 慻lyphRef?elements10.15 White space handling10.16 Text selection and clipboard operations10.17 DOM interfaces10.17.1 Interface SVGTextContentElement10.17.2 Interface SVGTextPositioningElement10.17.3 Interface SVGTextElement10.17.4 Interface SVGTSpanElement10.17.5 Interface SVGTRefElement10.17.6 Interface SVGTextPathElement10.17.7 Interface SVGAltGlyphElement10.17.8 Interface SVGAltGlyphDefElement10.17.9 Interface SVGAltGlyphItemElement10.17.10 Interface SVGGlyphRefElement11 Painting: Filling11.1 Introduction11.2 Specifying paint11.3 Fill Properties11.4 Stroke Properties11.5 Controlling visibility11.6 Markers11.6.1 Introduction11.6.2 The 憁arker?element11.6.3 Marker properties11.6.4 Details on how markers are rendered11.7 Rendering properties11.7.1 Color interpolation properties: 慶olor-interpolation?and 慶olor-interpolation-filters?11.7.2 The 慶olor-rendering?property11.7.3 The 憇hape-rendering?property11.7.4 The 憈ext-rendering?property11.7.5 The 慽mage-rendering?property11.8 Inheritance of painting properties11.9 DOM interfaces11.9.1 Interface SVGPaint11.9.2 Interface SVGMarkerElement12 Color12.1 Introduction12.2 The 慶olor?property12.3 Color profile descriptions12.3.1 Overview of color profile descriptions12.3.2 Alternative ways of defining a color profile description12.3.3 The 慶olor-profile?element12.3.4 The CSS @color-profile rule12.3.5 The 慶olor-profile?property12.4 DOM interfaces12.4.1 Interface SVGColorProfileElement12.4.2 Interface SVGColorProfileRule13 Gradients and Patterns13.1 Introduction13.2 Gradients13.2.1 Introduction13.2.2 Linear gradients13.2.3 Radial gradients13.2.4 Gradient stops13.3 Patterns13.4 DOM interfaces13.4.1 Interface SVGGradientElement13.4.2 Interface SVGLinearGradientElement13.4.3 Interface SVGRadialGradientElement13.4.4 Interface SVGStopElement13.4.5 Interface SVGPatternElement14 Clipping14.1 Introduction14.2 Simple alpha compositing14.3 Clipping paths14.3.1 Introduction14.3.2 The initial clipping path14.3.3 The 憃verflow?and 慶lip?properties14.3.4 Clip to viewport vs. clip to 憊iewBox?14.3.5 Establishing a new clipping path: the 慶lipPath?element14.3.6 Clipping paths14.4 Masking14.5 Object and group opacity: the 憃pacity?property14.6 DOM interfaces14.6.1 Interface SVGClipPathElement14.6.2 Interface SVGMaskElement15 Filter Effects15.1 Introduction15.2 An example15.3 The 慺ilter?element15.4 The 慺ilter?property15.5 Filter effects region15.6 Accessing the background image15.7 Filter primitives overview15.7.1 Overview15.7.2 Common attributes15.7.3 Filter primitive subregion15.8 Light source elements and properties15.8.1 Introduction15.8.2 Light source 慺eDistantLight?15.8.3 Light source 慺ePointLight?15.8.4 Light source 慺eSpotLight?15.8.5 The 憀ighting-color?property15.9 Filter primitive 慺eBlend?15.10 Filter primitive 慺eColorMatrix?15.11 Filter primitive 慺eComponentTransfer?15.12 Filter primitive 慺eComposite?15.13 Filter primitive 慺eConvolveMatrix?15.14 Filter primitive 慺eDiffuseLighting?15.15 Filter primitive 慺eDisplacementMap?15.16 Filter primitive 慺eFlood?15.17 Filter primitive 慺eGaussianBlur?15.18 Filter primitive 慺eImage?15.19 Filter primitive 慺eMerge?15.20 Filter primitive 慺eMorphology?15.21 Filter primitive 慺eOffset?15.22 Filter primitive 慺eSpecularLighting?15.23 Filter primitive 慺eTile?15.24 Filter primitive 慺eTurbulence?15.25 DOM interfaces15.25.1 Interface SVGFilterElement15.25.2 Interface SVGFilterPrimitiveStandardAttributes15.25.3 Interface SVGFEBlendElement15.25.4 Interface SVGFEColorMatrixElement15.25.5 Interface SVGFEComponentTransferElement15.25.6 Interface SVGComponentTransferFunctionElement15.25.7 Interface SVGFEFuncRElement15.25.8 Interface SVGFEFuncGElement15.25.9 Interface SVGFEFuncBElement15.25.10 Interface SVGFEFuncAElement15.25.11 Interface SVGFECompositeElement15.25.12 Interface SVGFEConvolveMatrixElement15.25.13 Interface SVGFEDiffuseLightingElement15.25.14 Interface SVGFEDistantLightElement15.25.15 Interface SVGFEPointLightElement15.25.16 Interface SVGFESpotLightElement15.25.17 Interface SVGFEDisplacementMapElement15.25.18 Interface SVGFEFloodElement15.25.19 Interface SVGFEGaussianBlurElement15.25.20 Interface SVGFEImageElement15.25.21 Interface SVGFEMergeElement15.25.22 Interface SVGFEMergeNodeElement15.25.23 Interface SVGFEMorphologyElement15.25.24 Interface SVGFEOffsetElement15.25.25 Interface SVGFESpecularLightingElement15.25.26 Interface SVGFETileElement15.25.27 Interface SVGFETurbulenceElement16 Interactivity16.1 Introduction16.2 Complete list of supported events16.3 User interface events16.4 Pointer events16.5 Hit-testing and processing order for user interface events16.5.1 Hit-testing16.5.2 Event processing16.6 The 憄ointer-events?property16.7 Magnification and panning16.8 Cursors16.8.1 Introduction to cursors16.8.2 The 慶ursor?property16.8.3 The 慶ursor?element16.9 DOM interfaces16.9.1 Interface SVGCursorElement17 Linking17.1 References17.1.1 Overview17.1.2 IRIs and URIs17.1.3 Syntactic forms: IRI and FuncIRI17.1.4 Processing of IRI references17.1.5 IRI reference attributes17.2 Links out of SVG content: the 慳?element17.3 Linking into SVG content: IRI fragments and SVG views17.3.1 Introduction: IRI fragments and SVG views17.3.2 SVG fragment identifiers17.3.3 Predefined views: the 憊iew?element17.3.4 Highlighting views17.4 DOM interfaces17.4.1 Interface SVGAElement17.4.2 Interface SVGViewElement18 Scripting18.1 Specifying the scripting language18.1.1 Specifying the default scripting language18.1.2 Local declaration of a scripting language18.2 The 憇cript?element18.3 Event handling18.4 Event attributes18.4.1 Event attribute for the SVGLoad event18.4.2 Event attributes on graphics and container elements18.4.3 Document-level event attributes18.4.4 Animation event attributes18.5 DOM interfaces18.5.1 Interface SVGScriptElement18.5.2 Interface SVGZoomEvent19 Animation19.1 Introduction19.2 Animation elements19.2.1 Overview19.2.2 Relationship to SMIL Animation19.2.3 Animation elements example19.2.4 Attributes to identify the target element for an animation19.2.5 Attributes to identify the target attribute or property for an animation19.2.6 Animation with namespaces19.2.7 Paced animation and complex types19.2.8 Attributes to control the timing of the animation19.2.8.1 Clock values19.2.9 Attributes that define animation values over time19.2.10 Attributes that control whether animations are additive19.2.11 Inheritance19.2.12 The 慳nimate?element19.2.13 The 憇et?element19.2.14 The 慳nimateMotion?element19.2.15 The 慳nimateColor?element19.2.16 The 慳nimateTransform?element19.2.17 Elements19.3 Animation using the SVG DOM19.4 DOM interfaces19.4.1 Interface ElementTimeControl19.4.2 Interface TimeEvent19.4.3 Interface SVGAnimationElement19.4.4 Interface SVGAnimateElement19.4.5 Interface SVGSetElement19.4.6 Interface SVGAnimateMotionElement19.4.7 Interface SVGMPathElement19.4.8 Interface SVGAnimateColorElement19.4.9 Interface SVGAnimateTransformElement20 Fonts20.1 Introduction20.2 Overview of SVG fonts20.3 The 慺ont?element20.4 The 慻lyph?element20.5 The 憁issing-glyph?element20.6 Glyph selection rules20.7 The 慼kern?and 憊kern?elements20.8 Describing a font20.8.1 Overview of font descriptions20.8.2 Alternative ways for providing a font description20.8.3 The 慺ont-face?element20.8.4 The 慺ont-face-src?element20.8.5 The 慺ont-face-uri?and 慺ont-face-format?elements20.8.6 The 慺ont-face-name?element20.9 DOM interfaces20.9.1 Interface SVGFontElement20.9.2 Interface SVGGlyphElement20.9.3 Interface SVGMissingGlyphElement20.9.4 Interface SVGHKernElement20.9.5 Interface SVGVKernElement20.9.6 Interface SVGFontFaceElement20.9.7 Interface SVGFontFaceSrcElement20.9.8 Interface SVGFontFaceUriElement20.9.9 Interface SVGFontFaceFormatElement20.9.10 Interface SVGFontFaceNameElement21 Metadata21.1 Introduction21.2 The 憁etadata?element21.3 An example21.4 DOM interfaces21.4.1 Interface SVGMetadataElement22 Backwards Compatibility23 Extensibility23.1 Foreign namespaces and private data23.2 Embedding foreign object types23.3 The 慺oreignObject?element23.4 An example23.5 Adding private elements and attributes to the DTD23.6 DOM interfaces23.6.1 Interface SVGForeignObjectElementAppendix A: Document Type DefinitionA.1 IntroductionA.2 ModularizationA.2.1 Element and attribute collectionsA.2.2 Profiling the SVG specificationA.2.3 Practical considerationsA.3 SVG 1.1 module definitions and DTD implementationsA.3.1 Modular Framework ModuleA.3.2 Datatypes ModuleA.3.3 Qualified Name ModuleA.3.4 Core Attribute ModuleA.3.5 Container Attribute ModuleA.3.6 Viewport Attribute ModuleA.3.7 Paint Attribute ModuleA.3.8 Basic Paint Attribute ModuleA.3.9 Paint Opacity Attribute ModuleA.3.10 Graphics Attribute ModuleA.3.11 Basic Graphics Attribute ModuleA.3.12 Document Events Attribute ModuleA.3.13 Graphical Element Events Attribute ModuleA.3.14 Animation Events Attribute ModuleA.3.15 XLink Attribute ModuleA.3.16 External Resources Attribute ModuleA.3.17 Structure ModuleA.3.18 Basic Structure ModuleA.3.19 Conditional Processing ModuleA.3.20 Image ModuleA.3.21 Style ModuleA.3.22 Shape ModuleA.3.23 Text ModuleA.3.24 Basic Text ModuleA.3.25 Marker ModuleA.3.26 Color Profile ModuleA.3.27 Gradient ModuleA.3.28 Pattern ModuleA.3.29 Clip ModuleA.3.30 Basic Clip ModuleA.3.31 Mask ModuleA.3.32 Filter ModuleA.3.33 Basic Filter ModuleA.3.34 Cursor ModuleA.3.35 Hyperlinking ModuleA.3.36 View ModuleA.3.37 Scripting ModuleA.3.38 Animation ModuleA.3.39 Font ModuleA.3.40 Basic Font ModuleA.3.41 Extensibility ModuleA.4 SVG 1.1 Document Type DefinitionA.4.1 SVG 1.1 DTD DriverA.4.2 SVG 1.1 Document ModelA.4.3 SVG 1.1 Attribute CollectionAppendix B: SVG Document Object Model (DOM)B.1 SVG DOM overviewB.1.1 SVG DOM object initializationB.2 Elements in the SVG DOMB.3 Naming conventionsB.4 Exception SVGExceptionB.5 Feature strings for the hasFeature method callB.6 Relationship with DOM Level 2 EventsB.7 Relationship with DOM Level 2 CSSB.7.1 IntroductionB.7.2 User agents that do not support styling with CSSB.7.3 User agents that support styling with CSSB.7.4 Extended interfacesB.8 Read only nodes in the DOMB.9 Invalid valuesAppendix C: IDL DefinitionsAppendix D: Java Language BindingD.1 The Java language bindingD.2 Using SVG with the Java languageAppendix E: ECMAScript Language BindingE.1 ExceptionsE.2 ConstantsE.3 TypesE.4 ObjectsAppendix F: Implementation RequirementsF.1 IntroductionF.2 Error processingF.3 Version controlF.4 Clamping values which are restricted to a particular rangeF.5 憄ath?element implementation notesF.6 Elliptical arc implementation notesF.6.1 Elliptical arc syntaxF.6.2 Out-of-range parametersF.6.3 Parameterization alternativesF.6.4 Conversion from center to endpoint parameterizationF.6.5 Conversion from endpoint to center parameterizationF.6.6 Correction of out-of-range radiiF.7 Text selection implementation notesF.8 Printing implementation notesAppendix G: Conformance CriteriaG.1 IntroductionG.2 Conforming SVG Document FragmentsG.3 Conforming SVG Stand-Alone FilesG.4 Conforming SVG GeneratorsG.5 Conforming SVG ServersG.6 Conforming SVG DOM SubtreeG.7 Conforming SVG InterpretersG.8 Conforming SVG ViewersAppendix H: Accessibility SupportH.1 WAI Accessibility GuidelinesH.2 SVG Content Accessibility GuidelinesAppendix I: Internationalization SupportI.1 IntroductionI.2 Internationalization and SVGI.3 SVG Internationalization GuidelinesAppendix J: Minimizing SVG File SizesAppendix K: ReferencesK.1 Normative referencesK.2 Informative referencesAppendix L: Element IndexAppendix M: Attribute IndexM.1 Regular attributesM.2 Presentation attributesAppendix N: Property IndexAppendix O: Feature StringsO.1 IntroductionO.2 SVG 1.1 feature stringsO.3 SVG 1.0 feature stringsAppendix P: Media Type Registration for image/svg+xmlP.1 IntroductionP.2 Registration of media type image/svg+xmlAppendix Q: ChangesCheck Update
文字

SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties

2 Concepts

Contents

  • 2.1 Explaining the name: SVG
  • 2.2 Important SVG concepts
  • 2.3 Options for using SVG in Web pages

2.1 Explaining the name: SVG

SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML namespace.

Scalable

To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.

SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. The symbol, marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.

Vector

Vector graphics contain geometric objects such as lines and curves. This gives greater flexibility compared to raster-only formats (such as PNG and JPEG) which have to store information for every pixel of the graphic. Typically, vector formats can also integrate raster images and can combine them with vector information such as clipping paths to produce a complete illustration; SVG is no exception.

Since all modern displays are raster-oriented, the difference between raster-only and vector graphics comes down to where they are rasterized; client side in the case of vector graphics, as opposed to already rasterized on the server. SVG gives control over the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations. SVG also provides client-side raster filter effects, so that moving to a vector format does not mean the loss of popular effects such as soft drop shadows.

Graphics

Most existing XML grammars represent either textual information, or represent raw data such as financial information. They typically provide only rudimentary graphical capabilities, often less capable than the HTML 'img' element. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can be used stand-alone, or as an XML namespace with other grammars.

XML

XML, a for structured information exchange, has become extremely popular and is both widely and reliably implemented. By being written in XML, SVG builds on this strong foundation and gains many advantages such as a sound basis for internationalization, powerful structuring capability, an object model, and so on. By building on existing, cleanly-implemented specifications, XML-based grammars are open to implementation without a huge reverse engineering effort.

Namespace

It is certainly useful to have a stand-alone, SVG-only viewer. But SVG is also intended to be used as one component in a multi-namespace XML application. This multiplies the power of each of the namespaces used, to allow innovative new content to be created. For example, SVG graphics may be included in a document which uses any text-oriented XML namespace - including XHTML. A scientific document, for example, might also use MathML for mathematics in the document. The combination of SVG and SMIL leads to interesting, time based, graphically rich presentations.

SVG is a good, general-purpose component for any multi-namespace grammar that needs to use graphics.

Stylable

The advantages of style sheets in terms of presentational control, flexibility, faster download and improved maintenance are now generally accepted, certainly for use with text. SVG extends this control to the realm of graphics.

The combination of scripting, DOM and CSS is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. SVG allows the same script-based manipulation of the document tree and the style sheet.

2.2 Important SVG concepts

Graphical Objects

With any XML grammar, consideration has to be given to what exactly is being modelled. For textual formats, modelling is typically at the level of paragraphs and phrases, rather than individual nouns, adverbs, or phonemes. Similarly, SVG models graphics at the level of graphical objects rather than individual points.

SVG provides a general path element, which can be used to create a huge variety of graphical objects, and also provides common basic shapes such as rectangles and ellipses. These are convenient for hand coding and may be used in the same ways as the more general path element. SVG provides fine control over the coordinate system in which graphical objects are defined and the transformations that will be applied during rendering.

Symbols

It would have been possible to define some standard symbols that SVG would provide. But which ones? There would always be additional symbols for electronics, cartography, flowcharts, etc., that people would need that were not provided until the "next version". SVG allows users to create, re-use and share their own symbols without requiring a centralized registry. Communities of users can create and refine the symbols that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the symbols they use and not have to worry about unsupported symbols.

Symbols may be used at different sizes and orientations, and can be restyled to fit in with the rest of the graphical composition.

Raster Effects

Many existing Web graphics use the filtering operations found in paint packages to create blurs, shadows, lighting effects and so on. With the client-side rasterization used with vector formats, such effects might be thought impossible. SVG allows the declarative specification of filters, either singly or in combination, which can be applied on the client side when the SVG is rendered. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.

Fonts

Graphically rich material is often highly dependent on the particular font used and the exact spacing of the glyphs. In many cases, designers convert text to outlines to avoid any font substitution problems. This means that the original text is not present and thus searchability and accessibility suffer. In response to feedback from designers, SVG includes font elements so that both text and graphical appearance are preserved.

Animation

Animation can be produced via script-based manipulation of the document, but scripts are difficult to edit and interchange between authoring tools is harder. Again in response to feedback from the design community, SVG includes declarative animation elements which were designed collaboratively by the SVG and SYMM Working Groups. This allows the animated effects common in existing Web graphics to be expressed in SVG.

2.3 Options for using SVG in Web pages

There are a variety of ways in which SVG content can be included within a Web page. Here are some of the options:

A stand-alone SVG Web page
In this case, an SVG document (i.e., a Web resource whose MIME type is "image/svg+xml") is loaded directly into a user agent such as a Web browser. The SVG document is the Web page that is presented to the user.
Embedding by reference
In this case, a parent Web page references a separately stored SVG document and specifies that the given SVG document should be embedded as a component of the parent Web page. For HTML or XHTML, here are three options:
  • The HTML/XHTML ‘img’ element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is ‘alt’, used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A ‘longdesc’ attribute lets you point to a longer description - often in HTML - which can have markup and richer formatting.
  • The HTML/XHTML ‘object’ element can contain other elements nested within it, unlike ‘img’, which is empty. This means that several different formats can be offered, using nested ‘object’ elements, with a final textual alternative (including markup, links, etc). The outermost element which can be displayed will be used.
  • The HTML/XHTML ‘applet’ element which can invoke a Java applet to view SVG content within the given Web page. These applets can do many things, but a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason.
Embedding inline
In this case, SVG content is embedded inline directly within the parent Web page. An example is an XHTML Web page with an SVG document fragment textually included within the XHTML.
External link, using the HTML ‘a’ element
This allows any stand-alone SVG viewer to be used, which can (but need not) be a different program to that used to display HTML. This option typically is used for unusual image formats.
Referenced from a CSS or XSL property
When a user agent supports CSS-styled XML content [CSS2] or XSL [XSL] and the user agent is a Conforming SVG Viewer, then that user agent must support the ability to reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images, including the ability to tile SVG graphics wherever necessary and the ability to composite the SVG into the background if it has transparent portions. Examples include the ‘background-image’ and ‘list-style-image’ properties ([CSS2], sections 14.2.1 and 12.6.2) that are included in both CSS and XSL.
SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
上一篇:下一篇: