-
Notifications
You must be signed in to change notification settings - Fork 131
/
render.html
805 lines (699 loc) · 32.6 KB
/
render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
<head>
<title>Rendering Model</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Style sheets for local dev. Will be standardized in processing.
Add attribute data-keep="" to any extra stylesheet link you do not want removed
(or use <style>), and include it before here. -->
<link rel="stylesheet" href="style/svg.css" type="text/css" />
<link rel="stylesheet" href="style/W3C-ED.css" type="text/css" />
</head>
<body>
<h1>Rendering Model</h1>
<div class="annotation">
<p>
The SVG 2 rendering model will follow the rules defined by the <a href="https://www.w3.org/TR/compositing/">Compositing and Blending specification</a>.
</p>
<p>
Resolution: <a href="http://www.w3.org/2012/07/24-svg-minutes.html#item09">Seattle/Paris 2012 F2F day 3</a>.
</p>
<p>
Owner: Nikos (Action 3332).
</p>
<p>
Status: Done.
</p>
</div>
<h2 id="Introduction">Introduction</h2>
<p>
Implementations of SVG must implement the rendering model as described in this
chapter, as modified in the appendix on <a href="conform.html">conformance
requirements</a>which describes
situations where an implementation may deviate.
In practice variability is allowed based on limitations of the output device
(e.g. only a limited range of colors might be supported) and because of practical
limitations in implementing a precise mathematical model (e.g. for realistic
performance curves are approximated by straight lines, the approximation need
only be sufficiently precise to match the conformance requirements).
</p>
<p>The appendix on <a href="conform.html">conformance
requirements</a> describes the extent to which an actual
implementation may deviate from this description. In practice
an actual implementation <span class="ready-for-wider-review">may</span>
deviate slightly because of
limitations of the output device (e.g. only a limited range of
colors might be supported) and because of practical limitations
in implementing a precise mathematical model (e.g. for
realistic performance curves are approximated by straight
lines, the approximation need only be sufficiently precise to
match the conformance requirements).</p>
<div class='ready-for-wider-review'>
<h2 id="RenderingTree">The rendering tree</h2>
<p> The components of the final rendered representation of an SVG document
do not have a one-to-one relationship with the underlying
elements in the document model.
The appearance of the graphic instead reflects a parallel structure,
the rendering tree,
in which some elements are excluded and others are repeated.
</p>
<p> Many elements in the SVG namespace do not directly represent
a component of the graphical document.
Instead, they define graphical effects, metadata,
content to be used to represent other elements,
or alternatives to be displayed under certain conditions.
In dynamic documents, certain components of the graphic
may be rendered or not, depending on interaction or animation.
These non-rendered elements are not directly included
in the <a>rendering tree</a>.
</p>
<p>
Because SVG supports the reuse of graphical sub-components,
some elements are rendered multiple times.
The individual renderings may have context-dependent styling
and may be rasterized at different scales or transformations.
</p>
<h3 id="Definitions">Definitions</h3>
<dl class="definitions">
<dt><dfn id="TermRenderingTree" data-dfn-type="dfn" data-export="">rendering tree</dfn></dt>
<dd>
<p>
The rendering tree is the set of elements being rendered
in an <a>SVG document fragment</a>.
It is generated from the document tree
by excluding <a>non-rendered elements</a>
and inserting additional fragments for <a>re-used graphics</a>.
Graphics are painted and composited in rendering-tree order,
subject to re-ordering based on the
<a>'paint-order'</a> property.
Note that elements that have no visual paint may still be in the rendering tree.
</p>
</dd>
<dt><dfn id="TermRenderedElement" data-dfn-type="dfn" data-export="">rendered element</dfn></dt>
<dd>
<p>
An element that has a direct representation in the
<a>rendering tree</a> for the current document.
Includes a rendered <a>instance</a> of an element in a <a>use-element shadow tree</a>.
Does not include elements that affect rendering
as the source definition of re-used graphics
but are not directly rendered themselves.
See <a href="#Rendered-vs-NonRendered">Rendered versus non-rendered elements</a>
</p>
</dd>
<dt><dfn id="TermNonRenderedElement" data-dfn-type="dfn" data-export="">non-rendered element</dfn></dt>
<dd>
<p>
An element that does not have a direct representation in the
<a>rendering tree</a> for the current document.
It may nonetheless affect the rendering tree as re-used graphics
or graphical effects.
See <a href="#Rendered-vs-NonRendered">Rendered versus non-rendered elements</a>.
</p>
</dd>
<dt><dfn id="TermReusedGraphics" data-dfn-type="dfn" data-export="">re-used graphics</dfn></dt>
<dd>
<p>
Graphical components that are included in the rendering tree
but do not have a single direct equivalent element
in the document model.
They may be represented through shadow DOM elements
(as in graphics re-used with a <a>'use'</a> element),
or as image fragments generated as part of a graphical effect
(as in patterns or masks).
</p>
</dd>
<dt><dfn id="TermNeverRenderedElement" data-dfn-type="dfn" data-export="">never-rendered element</dfn></dt>
<dd>
<p>
Any element type that is <em>never directly rendered</em>,
regardless of context or <a>'display'</a> style value.
It includes the following elements:
<edit:elementcategory name='never-rendered'/>;
it also includes a <a>'symbol'</a> element that is not
the <a>instance root</a> of a <a>use-element shadow tree</a>.
</p>
</dd>
<dt><dfn id="TermRenderableElement" data-dfn-type="dfn" data-export="">renderable element</dfn></dt>
<dd>
<p>
Any element type that <em>can</em> have a direct representation
in the <a>rendering tree</a>,
as a graphic, container, text, audio, or animation.
It includes the following elements:
<edit:elementcategory name='renderable'/>;
it also includes a <a>'symbol'</a> element that <em>is</em>
the <a>instance root</a> of a <a>use-element shadow tree</a>.
</p>
<p> A renderable element may or may not be rendered
in a given document or point in time.
</p>
</dd>
</dl>
<h3 id="Rendered-vs-NonRendered">Rendered versus non-rendered elements</h3>
<p> At any given time, every SVG element
(or <a>element instance</a> in a <a>use-element shadow tree</a>)
is either rendered or non-rendered.
Whether an element is currently rendered or not affects
not only its visual display but also interactivity
and geometric calculations.
</p>
<p>
An element is <em>not rendered</em> in any of these five situations:
</p>
<ul>
<li><a>never-rendered element</a> types</li>
<li>elements excluded because of <a>conditional processing attributes</a>
or <a>'switch'</a> structures
</li>
<li>elements with a computed style value of <code>none</code>
for the <a>'display'</a> property
</li>
<li>detached from the DOM tree</li>
<li>descendent elements of other non-rendered elements
</li>
</ul>
<p> Non-rendered elements:
</p>
<ul>
<li>have no visual effect on the graphic,
except when they are used in the rendering of another element
that references them.</li>
<li>do not contribute to the net geometry of
<a>clipping paths</a> or <a>masks</a>
when they are descendants of a
<a>'clipPath'</a> or <a>'mask element'</a> </li>
<li>are not sensitive to <a href="interact.html#UIEvents">pointer events</a></li>
<li>cannot receive <a>focus</a></li>
<li>do not contribute to <a href="coords.html#ObjectBoundingBox">bounding box
calculations</a></li>
<li>are not considered when performing <a href="text.html#TextLayout">text layout</a></li>
</ul>
<p> Non-rendered elements are not represented in the document accessibility tree.
Nonetheless, they remain part of the document model, and
participate in <a href="styling.html">style inheritance and cascade</a>.
</p>
<h3 id="VisibilityControl">Controlling visibility: the effect of the <span
class="property">'display'</span> and <span class="property">'visibility'</span>
properties</h3>
<p>
SVG uses two properties to toggle the visible display of
elements that are normally rendered:
<a>'display'</a> and <a>'visibility'</a>.
Although they have a similar visible effect in static documents,
they are conceptually distinct.
</p>
<p class="note">See the CSS 2.1 specification for the definitions
of <a>'display'</a> and <a>'visibility'</a>.
[<a href="refs.html#ref-css2">CSS2</a>]</p>
<p>
Setting <a>'display'</a> to <span class="prop-value">none</span>
results in the element not being rendered.
When applied to
<a>graphics elements</a>,
<a>text content elements</a>,
and <a>container elements</a> that are normally rendered,
setting <a>'display'</a> to <span class="prop-value">none</span>
results in the element (and all its descendents)
not becoming part of the <a>rendering tree</a>.
Note that <a>'display'</a> is not an inherited property.
</p>
<p>
Elements that have any other <a>'display'</a> value than
<span class="prop-value">none</span> are rendered as normal.
</p>
<p>
The <a>'display'</a> property only applies to <a>renderable elements</a>.
Setting <code>display: none</code> on an element
that is <a>never directly rendered</a>
or <a>not rendered</a> based on conditional processing
has no effect.
</p>
<p>
The <a>'display'</a> property affects the direct processing
of a given element, but it does not prevent it from
being referenced by other elements.
For example, setting
<span class="prop-value">display: none</span> on a <a>'path'</a> element
will prevent that element from getting rendered directly onto the
canvas, but the <a>'path'</a> element can still be referenced by a
<a>'textPath'</a> element and its geometry will be used
in text-on-a-path processing.
</p>
<p>
When applied to a <a>graphics element</a> or <a>'use'</a> element,
setting <a>'visibility'</a> to <span class="prop-value">hidden</span>
or <span class="prop-value">collapse</span>
results in the element not being painted.
It is, however, still part of the <a>rendering tree</a>.
It may be sensitive to pointer events
(depending on the value of <a>'pointer-events'</a>),
may receive focus (depending on the value of <a>'tabindex'</a>),
contributes to bounding box calculations and clipping paths,
and does affect text layout.
</p>
<p>
The <a>'visibility'</a> property only directly affects the rendering of
<a>graphics elements</a>, <a>text content elements</a>, and the
<a>'a'</a> element when it is a child of <a>text content element</a>.
Since <a>'visibility'</a> is an inherited property, however,
although it has no effect on a <a>'use'</a> element or <a>container element</a> itself,
its inherited value can affect descendant elements.
</p>
<h3 id="ReusedGraphics">Re-used graphics</h3>
<p> Graphical content defined in one part of the document
(or in another document)
may be used to render other elements.
There are two types of re-used graphics from a rendering perspective:
</p>
<ul>
<li>
shadow DOM elements,
such as those generated by <a>'use'</a> elements
or by cross-references between paint servers;
</li>
<li>
content re-used as part of a graphical effect on another element,
including the child content of
<a>markers</a>, <a>paint server elements</a>,
<a>'clipPath'</a>, and <a>'mask element'</a>.
</li>
</ul>
<p>
Shadow DOM elements are rendered in the same way as normal elements,
as if the host element (e.g., the <a>'use'</a> element)
was a container and the shadow content was its descendents.
Style and geometry properties on the shadow DOM elements
are resolved independently from those on their <a>corresponding element</a>
in the source document.
The <a>'display'</a> property has its normal effect on shadow elements,
except for special rules that apply to the <a>'symbol'</a> element.
</p>
<p>
For blending purposes, the <a>'use'</a> element forms a <a>non-isolated group</a>.
</p>
<p>
In contrast,
graphical effects elements generate a self-contained SVG fragment
which is rendered independently as a <a>stacking context</a>
and an <a>isolated group</a>.
The canvas for this fragment is scaled
The graphical effect element's child content
is rendered and composited into this canvas.
The flattened canvas as a whole is treated as a vector image
when compositing and blending with other paint layers
</p>
<p>
The <a>'display'</a> property on any child content of a graphical effects element
has its normal effect when set to <code>none</code>,
excluding that subtree from being used in rendering.
However, the graphical effect is not altered
by a value of <code>display: none</code>
on the graphical effect element or an ancestor.
</p>
</div>
<div class="ready-for-wider-review">
<h2 id="PaintersModel">The painters model</h2>
<p>SVG uses a "painters model" of rendering. <a>Paint</a>
is applied in successive operations to the output device such
that each operation paints onto some area of the output device,
possibly obscuring paint that has previously been layed down.
After each object or group is painted, it becomes part of the background
for the next painting operation.
SVG 2 supports advanced blending modes and compositing operations that
control how each painting operation interacts with the background.
The rules governing these painting operations are outlined in the
<a href="https://www.w3.org/TR/compositing/">Compositing and Blending Specification</a>.
</p>
<h2 id="RenderingOrder">Rendering order</h2>
<p>Elements in SVG are positioned in three dimensions. In addition to their
position on the x and y axis of the <a>SVG viewport</a>, SVG elements are also
positioned on the z axis. The position on the z-axis defines the order that
they are painted.</p>
<p>Along the z axis, elements are grouped into <dfn id="TermStackingContext" data-dfn-type="dfn" data-export="">stacking contexts</dfn>.</p>
</div>
<h3 id="EstablishingStackingContex">Establishing a stacking context in SVG</h3>
<p>A new stacking context must be established at an SVG element for its descendants if:</p>
<ul>
<li>it is the root element</li>
<li>the element is an <a>outermost svg element</a>, or a <a>'foreignObject'</a>,
<a>'image'</a>, <a>'marker element'</a>, <a>'mask element'</a>, <a>'pattern'</a>,
<a>'symbol'</a> or <a>'use'</a> element</li>
<li>the element is an inner <a>'svg'</a> element and the computed value of its
<a>'overflow'</a> property is a value other than <span class='prop-value'>visible</span></li>
<li>the element is subject to explicit clipping:
<ul>
<li>the <a>'clip'</a> property applies to the element and it has a
computed value other than <span class='prop-value'>auto</span></li>
<li>the <a>'clip-path'</a> property applies to the element and it has a
computed value other than <span class='prop-value'>none</span></li>
</ul>
</li>
<li>the <a>'opacity'</a> property applies to the element and it has a
computed value other than <span class='prop-value'>1</span></li>
<li>the <a>'mask property'</a> property applies to the element and it has a computed
value other than <span class='prop-value'>none</span></li>
<li>the <a>'filter property'</a> property applies to the element and it has a
computed value other than <span class='prop-value'>none</span></li>
<li class="ready-for-wider-review">a property defined in another specification is
applied and that property is defined to establish a stacking context in SVG</li>
</ul>
<p>Stacking contexts are conceptual tools used to describe the
order in which elements must be painted one on top of the other when the
document is rendered, and for determining which element is highest when
determining the target of a pointer event. Stacking contexts do
not affect the position of elements in the DOM tree, and their presence or
absence does not affect an element's position, size or orientation in the
canvas' X-Y plane - only the order in which it is painted.</p>
<p>Stacking contexts can contain further stacking contexts. A stacking context is
atomic from the point of view of its parent stacking context; elements in
ancestor stacking contexts may not come between any of its elements.</p>
<p>Each element belongs to one stacking context. Elements in a stacking context
must be stacked according to document order.</p>
<p>With the exception of the <a>'foreignObject'</a> element, the back to front
stacking order for a stacking context created by an SVG element is:</p>
<ol>
<li>the background and borders of the element forming the stacking
context, if any</li>
<li>descendants, in tree order</li>
</ol>
<p>Since the <a>'foreignObject'</a> element creates a "fixed position containing block" in
CSS terms, the normative rules for the stacking order of the stacking context
created by <a>'foreignObject'</a> elements are the rules in Appendix E of CSS 2.1.</p>
<h2 id="Elements">How elements are rendered</h2>
<div class="ready-for-wider-review">
<p>
Individual <a>graphics elements</a> are treated as if they are a <a>non-isolated group</a>,
the components (fill, stroke, etc) that make up a graphic element
(See <a href="#PaintingShapesAndText">Painting shapes and text</a>) being
members of that group. See <a href="#Grouping">How groups are rendered</a>.
</p>
</div>
<h2 id="Grouping">How groups are rendered</h2>
<div class="ready-for-wider-review">
</div>
<div class="ready-for-wider-review">
<p>
Grouping elements, such as the <a>'g'</a> element (see <a>container elements</a>
) create a <a>compositing group</a>.
Similarly, a <a>'use'</a> element creates a compositing group for its shadow content.
The <a>Compositing and Blending</a>
specification normatively describes how to render <a>compositing groups</a>.
In SVG, effects may be applied to a group. For example, opacity, filters
or masking. These effects are applied to the rendered result of the group
immediately before any transforms on the group are applied, which are applied
immediately before the group is blended and composited with the
<a>group backdrop</a>. Applying any such effects to a group makes that
group isolated.
<br/><br/>
Thus, rendering a <a>compositing group</a> follows the following steps:<br/>
If the group is isolated:
</p>
<ol>
<li>The <a>initial backdrop</a> is set to a new buffer initialised with
rgba(0,0,0,0)</li>
<li>The contents of the group that are <a>graphics elements</a> or
<a>'g element'</a> elements are rendered
<a href="#RenderingOrder">in order</a>, onto the
<a>initial backdrop</a></li>
<li>filters and other effects that modify the group canvas are applied
<div class="note">
<p class='ready-for-wider-review'>To provide for high quality rendering, filter
primitives and other bitmap effects must be applied in the
<a>operating coordinate space</a>.</p>
</div>
</li>
<li>Group transforms are applied</li>
<li>The group canvas is blended and composited with the <a>group backdrop</a></li>
</ol>
else (the group is not isolated):
<ol>
<li>The <a>initial backdrop</a> is set to the <a>group backdrop</a></li>
<li>The contents of the group that are <a>graphics elements</a> or
<a>'g element'</a> elements are rendered
<a href="#RenderingOrder">in order</a>, onto the
<a>initial backdrop</a>. The group transforms are applied to each element
as they are rendered.</li>
</ol>
</div>
<h3 id="ObjectAndGroupOpacityProperties">Object and group opacity: the
effect of the <span class="property">'opacity'</span> property</h3>
<p class="note">See the CSS Color Module Level 3 for the definition
of <a>'opacity'</a>. [<a href="refs.html#ref-css-color-3">css-color-3</a>]</p>
<p>The <a>'opacity'</a> property specifies how opaque a given
graphical element or container element will be when it is
painted to the canvas. When applied to a container element,
this is known as <em>group opacity</em>, and when applied to
an individual rendering element, it is known as <em>object
opacity</em>. The principle for these two operations however
is the same.</p>
<p>There are several other opacity-related properties in SVG:</p>
<ul>
<li><a>'fill-opacity'</a>, which specifies the opacity of a fill
operation;</li>
<li><a>'stroke-opacity'</a>, which specifies the opacity of a stroking
operation; and</li>
<li><a>'stop-opacity'</a>, which specifies the opacity of a gradient stop.</li>
</ul>
<p>These four opacity properties are involved in intermediate rendering operations.
Object and group opacity however can be thought of as a post-processing operation.
Conceptually, the object or group to which <a>'opacity'</a> applies
is rendered into an RGBA offscreen image. The offscreen image as whole is then blended
into the canvas with the specified <a>'opacity'</a> value used uniformly
across the offscreen image.
<span class="ready-for-wider-review">
Thus, the presence of <a>'opacity property'</a> causes the group to be
<a>isolated</a>.
</span>
</p>
<p>The <a>'opacity'</a> property applies to the following SVG elements:
<a>'svg'</a>, <a>'g'</a>, <a>'symbol'</a>, <a>'marker element'</a>,
<a>'a'</a>, <a>'switch'</a>, <a>'use'</a>, <a>'unknown'</a> and <a>graphics elements</a>.</p>
<div class="example">
<p>The following example illustrates various usage of the <a>'opacity'</a>
property on objects and groups.</p>
<edit:includefile href='images/masking/opacity01.svg'/>
<div class='figure'>
<img class='bordered' src='images/masking/opacity01.svg' alt='Image showing different groups of circles blended into the background.'/>
<p class='caption'>Each group of red and green circles is first rendered
to an offscreen image before being blended with the background
blue rectangle as a whole, with the given <a>'opacity'</a> values.</p>
</div>
<p>In the example, the top row of circles have differing opacities,
ranging from 1.0 to 0.2. The bottom row illustrates five <a>'g'</a> elements,
each of which contains overlapping red and green circles, as follows:</p>
<ul>
<li>The first group shows the opaque case for reference. The group has
opacity of 1, as do the circles.</li>
<li>The second group shows group opacity when the elements in the group are
opaque.</li>
<li>The third and fourth group show that opacity is not commutative. In the
third group (which has opacity of 1), a semi-transparent green circle is
drawn on top of a semi-transparent red circle, whereas in the fourth group a
semi-transparent red circle is drawn on top of a semi-transparent green
circle. Note that area where the two circles intersect display different
colors. The third group shows more green color in the intersection area,
whereas the fourth group shows more red color.</li>
<li>The fifth group shows the multiplicative effect of opacity settings.
Both the circles and the group itself have opacity settings of .5. The
result is that the portion of the red circle which does not overlap with the
green circle (i.e., the top/right of the red circle) will blend into the
blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after
blending into the blue rectangle, results in a blended color which is 25%
red and 75% blue.</li>
</ul>
</div>
<h2 id="TypesOfGraphicsElements">Types of graphics elements</h2>
<p>SVG supports three fundamental types of <a>graphics elements</a>
that can be rendered onto the canvas:</p>
<ul>
<li><a>Shapes</a>, which represent some combination of straight line
and curves</li>
<li>Text, which represents some combination of character glyphs</li>
<li>Raster images, which represent an array of values that
specify the paint color and opacity (often termed alpha) at a
series of points on a rectangular grid. (SVG requires support
for specified raster image formats under
<a href="conform.html">conformance requirements</a>.)</li>
</ul>
<h3 id="PaintingShapesAndText">Painting shapes and text</h3>
<p>Shapes and text can be <a>filled</a> (i.e., apply paint to the
interior of the shape) and <a>stroked</a> (i.e., apply paint
along the outline of the shape).</p>
<p>For certain types of shapes, <a href="painting.html#Markers">marker
symbols</a> (which themselves can consist of any combination of shapes,
text and images) can be drawn at positions along the
shape boundary. Each marker symbol
is painted as if its graphical content were expanded into the
SVG document tree just after the shape object which is using
the given marker symbol. The graphical contents of a marker
symbol are rendered using the same methods as graphics
elements. Marker symbols are not applicable to text.</p>
<p>The order in which fill, stroke and markers are painted is determined
by the <a>'paint-order'</a> property. The default is that
fill is painted first, then the stroke, and then the
marker symbols. The marker symbols are rendered in order along
the outline of the shape, from the start of the shape to the
end of the shape.</p>
<p>The fill and stroke operations are entirely independent;
for instance, each fill or stroke operation has its own opacity setting.</p>
<p>SVG supports numerous built-in types of paint which can
be used in fill and stroke operations. These are described in
<a href="pservers.html">Paint Servers</a>.</p>
<h3 id="PaintingRasterImages">Painting raster images</h3>
<p>When a raster image is rendered, the original samples are
"resampled" using standard algorithms to produce samples at the
positions required on the output device. Resampling
requirements are discussed under
<a href="conform.html">conformance requirements</a>.</p>
<p class="ready-for-wider-review">
As in HTML [<a href="refs.html#ref-html">HTML</a>, 10.4.2],
all animated images with the same absolute URL and the same image
data are expected to be rendered synchronised to the same timeline as a group,
with the timeline starting at the time of the least recent addition to the
group.
</p>
<p class="ready-for-wider-review">
When a user agent is to restart the animation for an img element showing an
animated image, all animated images with the same absolute URL and the same
image data in that img element's node document are expected to restart their
animation from the beginning.
</p>
<h2 id="FilteringPaintRegions">Filtering painted regions</h2>
<p>SVG allows any painting operation to be filtered. (See
<a href="https://www.w3.org/TR/filter-effects/">Filter Effects</a>.)</p>
<p>In this case the result must be as though the paint
operations had been applied to an intermediate canvas
initialized to transparent black, of a size determined by the
rules given in <a href="https://www.w3.org/TR/filter-effects/">Filter Effects</a> then
filtered by the processes defined in
<a href="https://www.w3.org/TR/filter-effects/">Filter Effects</a>.</p>
<div class="ready-for-wider-review">
<h2 id="ClippingAndMasking">Clipping and masking</h2>
<p>SVG supports the following clipping/masking features:</p>
<ul>
<li>clipping paths, which either uses
any combination of <a>'path'</a>, <a>'text'</a> and
<a>basic shapes</a> or basic shapes to serve as
the outline of a (in the absence of anti-aliasing) 1-bit
mask, where everything on the "inside" of the outline is
allowed to show through but everything on the outside is
masked out</li>
<li>masks, which are
<a>container elements</a>
which can contain <a>graphics elements</a>
or other container elements which define a set of graphics
that is to be used as a semi-transparent mask for compositing
foreground objects into the current background.</li>
</ul>
<p>Both, clipping and masking, are specified in the module CSS Masking
[<a href="refs.html#ref-css-masking-1">css-masking-1</a>].</p>
</div>
<h2 id="ParentCompositing">Parent compositing</h2>
<p>SVG document fragments can be semi-opaque.</p>
<p class="ready-for-wider-review">
In accordance with the <a>Compositing and Blending</a> specification,
the <a>'svg'</a> element always creates an <a>isolated</a> group.
When an SVG document is a top-level document,
meaning it is not embedded in another document,
the root <a>'svg'</a> element
is considered to be the <a>Page Group</a> and is composited with
a backdrop of white with 100% opacity.
In all other cases, the SVG document or document fragment is composited into the parent
document with opacity preserved.
</p>
<h2 id="OverflowAndClipProperties">The effect of the <span class="property">'overflow'</span>
property</h2>
<p class="note">See the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)
Specification [<a href="refs.html#ref-css2">CSS2</a>] for the definition of
<a>'overflow'</a>.</p>
<div class="ready-for-wider-review">
<table class="data compact">
<caption>A summary of the behavior of the <a>'overflow'</a> property in SVG.
</caption>
<thead>
<tr>
<th>element</th>
<th>initial</th>
<th>ua stylesheet</th>
<th>auto</th>
<th>visible</th>
<th>hidden</th>
<th>scroll</th>
</tr>
</thead>
<tbody>
<tr>
<th>document root svg</th><td>visible</td><td>n/a</td><td>visible | scroll</td><td>visible</td><td>hidden</td><td>scroll</td>
</tr>
<tr>
<th>other svg</th><td>visible</td><td>hidden</td><td>visible | scroll</td><td>visible</td><td>hidden</td><td>scroll</td>
</tr>
<tr>
<th>text</th><td>visible</td><td>hidden</td><td>visible</td><td>visible</td><td>hidden</td><td>hidden</td>
</tr>
<tr>
<th>pattern</th><td>visible</td><td>hidden</td><td>visible</td><td>visible</td><td>hidden</td><td>hidden</td>
</tr>
<tr>
<th>marker</th><td>visible</td><td>hidden</td><td>visible</td><td>visible</td><td>hidden</td><td>hidden</td>
</tr>
<tr>
<th>symbol</th><td>visible</td><td>hidden</td><td>visible</td><td>visible</td><td>hidden</td><td>hidden</td>
</tr>
<tr>
<th>image</th><td>visible</td><td>hidden</td><td>visible</td><td>visible</td><td>hidden</td><td>hidden</td>
</tr>
<tr>
<th>iframe</th><td>visible</td><td>hidden</td><td>visible | scroll</td><td>visible</td><td>hidden</td><td>scroll</td>
</tr>
<tr>
<th>foreignObject</th><td>visible</td><td>hidden</td><td>visible | scroll</td><td>visible</td><td>hidden</td><td>scroll</td>
</tr>
</tbody>
</table>
<p>The <a>'overflow'</a> property has the same parameter values and has the
same meaning <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#propdef-overflow">as defined in CSS 2.1</a>
([<a href="refs.html#ref-css2">CSS2</a>], section 11.1.1);
however, the following additional points apply:</p>
<ul>
<li>
If the <a>'overflow'</a> property has a value of 'visible',
the property has no effect (i.e., a clipping rectangle is not created).
</li>
<li>For those elements to which the <a>'overflow'</a> property can apply.
If the <a>'overflow'</a> property has the value <span class='prop-value'>
hidden</span> or <span class='prop-value'>scroll</span>, a clip,
the exact size of the SVG viewport is applied.
</li>
<li>
When <span class='prop-value'>scroll</span> is specified on an
<a>'svg'</a> element and if the user agent uses a scrolling mechanism that
is visible on the screen (such as a scroll bar or a panner), that mechanism
should be displayed for the SVG viewport whether or not any of its content is clipped.
</li>
<li>
Within SVG content, the value <span class='prop-value'>auto</span> implies
that all rendered content for child elements must be
<span class='prop-value'>visible</span>, either through a scrolling
mechanism, or by rendering with no clip.
For elements where the value of <span class='prop-value'>scroll</span> results
in a scrolling mechanism being used by the user agent, then a value of
<span class='prop-value'>auto</span> may be treated as
<span class='prop-value'>scroll</span>. If the user agent has no scrolling
mechanism, the content would not be clipped, or the value 'scroll' is treated
as <span class='prop-value'>hidden</span>, then the value
<span class='prop-value'>auto</span> must be treated as
<span class='prop-value'>visible</span>
</li>
</ul>
<div class="note">
Although the initial value for <a>'overflow'</a> is auto. In the User Agent style sheet,
overflow is overriden for the <a>'svg'</a> element when it is not the root
element of a stand-alone document, the <a>'pattern'</a> element, and the <a>'marker element'</a> element to be hidden by default.
</div>
</div> <!-- ready-for-wider-review -->
</body>
</html>