Sideway
output.to from Sideway
Draft for Information Only

Content

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

<symbol>

The ><symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

The use of <symbol> elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.

Example

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

    
<svg style='border:1px solid black' width='480' height='150' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='426' height='126' viewBox='-25, -25, 426, 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.938967136150235)' preserveAspectRatio='xMinYMin' viewBox='0 0 80 20' xmlns='http://www.w3.org/2000/svg'>
       <!-- Our symbol in its own coordinate system -->
       <symbol id='myDot' width='10' height='10' viewBox='0 0 2 2'>
           <circle cx='1' cy='1' r='1' />
       </symbol>

       <!-- A grid to materialize our symbol positioning -->
       <path d='M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20' fill='none' stroke='pink' />

       <!-- All instances of our symbol -->
       <use href='#myDot' x='5'  y='5' style='opacity:1.0' />
       <use href='#myDot' x='20' y='5' style='opacity:0.8' />
       <use href='#myDot' x='35' y='5' style='opacity:0.6' />
       <use href='#myDot' x='50' y='5' style='opacity:0.4' />
       <use href='#myDot' x='65' y='5' style='opacity:0.2' />
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='395' y='17' font-size='20'>(80,0)</text>
<text x='5' y='145' font-size='20'>(0,20)</text>
<text x='395' y='145' font-size='20'>(80,20)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='425' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='425' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:

Attributes

height This attribute determines the height of the symbol. Value type: <length>|<percentage> ; Default value: auto; Animatable: yes preserveAspectRatio This attribute defines how the svg fragment must be deformed if it is embedded in a container 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 refX This attribute determines the x coordinate of the reference point of the symbol. Value type: <length>|<percentage>|left|center|right ; Default value: 0; Animatable: yes refY This attribute determines the y coordinate of the reference point of the symbol. Value type: <length>|<percentage>|top|center|bottom ; Default value: 0; Animatable: yes viewBox This attribute defines the bound of the SVG viewport for the current symbol. Value type: <list-of-numbers> ; Default value: none; Animatable: yes width This attribute determines the width of the symbol. Value type: <length>|<percentage> ; Default value: auto; Animatable: yes x This attribute determines the x coordinate of the symbol. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes y This attribute determines the y coordinate of the symbol. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Global attributes

Core Attributes Most notably: id Styling Attributes class, style Event Attributes Global event attributes, Document element event attributes, Graphical 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

Categories Container element, Structural element Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Note: A <symbol> element itself is not meant to be rendered. Only instances of a <symbol> element (i.e., a reference to a <symbol> by a <use> element) are rendered. That means that some browsers could refuse to directly display a <symbol> element even if the CSS display property tells otherwise.

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/symbol
©sideway

ID: 211200022 Last Updated: 12/22/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