Sideway
output.to from Sideway
Draft for Information Only

Content

<svg>
 Example
 Attributes
  Global attributes
 Usage notes
 Specifications
 Sources and References

<svg>

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

Example

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='380' height='150' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='326' height='126' viewBox='-25, -25, 326, 126' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg transform='scale(0.920245398773006)' preserveAspectRatio='xMinYMin' viewBox='0 0 300 100' xmlns='http://www.w3.org/2000/svg'  stroke='red' fill='grey'>
       <circle cx='50' cy='50' r='40' />
       <circle cx='150' cy='50' r='4' />

       <svg viewBox='0 0 10 10' x='200' width='100'>
           <circle cx='5' cy='5' r='4' />
       </svg>
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='295' y='17' font-size='20'>(300,0)</text>
<text x='5' y='145' font-size='20'>(0,100)</text>
<text x='295' y='145' font-size='20'>(300,100)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='325' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='325' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

Attributes

baseProfile The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; Animatable: no contentScriptType The default scripting language used by the SVG fragment. Value type: <string> ; Default value: application/ecmascript; Animatable: no contentStyleType The default style sheet language used by the SVG fragment. Value type: <string> ; Default value: text/css; Animatable: no height The displayed height of the rectangular viewport. (Not the height of its coordinate system.) Value type: <length>|<percentage> ; Default value: auto; Animatable: yes preserveAspectRatio How the svg fragment must be deformed if it is displayed with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes version Which version of SVG is used for the inner content of the element. Value type: <number> ; Default value: none; Animatable: no viewBox The SVG viewport coordinates for the current SVG fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes width The displayed width of the rectangular viewport. (Not the width of its coordinate system.) Value type: <length>|<percentage> ; Default value: auto; Animatable: yes x The displayed x coordinate of the svg container. No effect on outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes y The displayed y coordinate of the svg container. No effect on outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.

Global attributes

Core Attributes Most notably: id, tabindex Styling Attributes class, style Conditional Processing Attributes Most notably: requiredExtensions, systemLanguage Event Attributes Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes Presentation Attributes Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility Aria Attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Specifications

Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)

Sources and References

  • https://www.w3.org/TR/SVG2/struct.html
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
©sideway

ID: 211200019 Last Updated: 12/19/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019