diff --git a/files/en-us/web/svg/attribute/fill/index.md b/files/en-us/web/svg/attribute/fill/index.md index 5ad133928d892eb..1a51f5d6019b7ba 100644 --- a/files/en-us/web/svg/attribute/fill/index.md +++ b/files/en-us/web/svg/attribute/fill/index.md @@ -53,7 +53,7 @@ svg { ```html - + diff --git a/files/en-us/web/svg/attribute/stroke/index.md b/files/en-us/web/svg/attribute/stroke/index.md index cc6e6e592c5e0a6..901f82c2393e32d 100644 --- a/files/en-us/web/svg/attribute/stroke/index.md +++ b/files/en-us/web/svg/attribute/stroke/index.md @@ -40,7 +40,7 @@ svg { ```html - + diff --git a/files/en-us/web/svg/attribute/textlength/index.md b/files/en-us/web/svg/attribute/textlength/index.md index ca4d9221dd4a41e..dc94e80b450af0b 100644 --- a/files/en-us/web/svg/attribute/textlength/index.md +++ b/files/en-us/web/svg/attribute/textlength/index.md @@ -66,7 +66,7 @@ svg { ## Interactive example -Let's create a simple example that presents text you can resize using an {{HTMLElement("input")}} element of type [`"range"`](/en-US/docs/Web/HTML/Element/input/range). +This example presents text you can resize using an {{HTMLElement("input")}} element of type [`"range"`](/en-US/docs/Web/HTML/Element/input/range). ### CSS @@ -114,7 +114,7 @@ First, a {{SVGElement("rect")}} element is used to create and stroke a rectangle ### HTML -The HTML is also simple, with only two displayed elements contained inside a grouping {{HTMLElement("div")}}: +The HTML includes two displayed elements contained inside a grouping {{HTMLElement("div")}}: ```html
diff --git a/files/en-us/web/svg/element/fegaussianblur/index.md b/files/en-us/web/svg/element/fegaussianblur/index.md index 13da5dc8f23c3d5..71a61b39f2a7611 100644 --- a/files/en-us/web/svg/element/fegaussianblur/index.md +++ b/files/en-us/web/svg/element/fegaussianblur/index.md @@ -25,7 +25,7 @@ This element implements the {{domxref("SVGFEGaussianBlurElement")}} interface. ## Example -### Simple example +### Basic example #### SVG @@ -47,7 +47,7 @@ This element implements the {{domxref("SVGFEGaussianBlurElement")}} interface. #### Result -{{EmbedLiveSample("Simple_example", "", "130")}} +{{EmbedLiveSample("Basic_example", "", "130")}} ### Drop shadow example diff --git a/files/en-us/web/svg/element/rect/index.md b/files/en-us/web/svg/element/rect/index.md index 056892ca1cf2d17..a56e2901f02ece7 100644 --- a/files/en-us/web/svg/element/rect/index.md +++ b/files/en-us/web/svg/element/rect/index.md @@ -21,7 +21,7 @@ svg { ```html - + diff --git a/files/en-us/web/svg/element/set/index.md b/files/en-us/web/svg/element/set/index.md index a54cf3755f6b3ac..6817cb5b0d6105b 100644 --- a/files/en-us/web/svg/element/set/index.md +++ b/files/en-us/web/svg/element/set/index.md @@ -7,7 +7,7 @@ browser-compat: svg.elements.set {{SVGRef}} -The SVG **``** element provides a simple means of just setting the value of an attribute for a specified duration. +The SVG **``** element provides a method of setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. For attributes that can be reasonably be interpolated, the {{SVGElement('animate')}} is usually preferred. diff --git a/files/en-us/web/svg/namespaces_crash_course/example/index.md b/files/en-us/web/svg/namespaces_crash_course/example/index.md index cf22e2c42a85117..eefb63d82929ec8 100644 --- a/files/en-us/web/svg/namespaces_crash_course/example/index.md +++ b/files/en-us/web/svg/namespaces_crash_course/example/index.md @@ -6,7 +6,7 @@ page-type: guide {{SVGRef}} -In this example, we use [XHTML](/en-US/docs/Glossary/XHTML), [SVG](/en-US/docs/Web/SVG), [JavaScript](/en-US/docs/Web/JavaScript), and the [DOM](/en-US/docs/Web/API/Document_Object_Model) to animate a swarm of "motes". These motes are governed by two simple principles. First, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural-looking behavior. +In this example, we use [XHTML](/en-US/docs/Glossary/XHTML), [SVG](/en-US/docs/Web/SVG), [JavaScript](/en-US/docs/Web/JavaScript), and the [DOM](/en-US/docs/Web/API/Document_Object_Model) to animate a swarm of "motes". These motes are governed by two basic principles. First, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural-looking behavior. [View the example](https://mdn.dev/archives/media/samples/svg/swarm-of-motes.xhtml). The linked example was written with 2006 best practices. The example below has been updated to modern JavaScript best practices. Both work. @@ -44,7 +44,7 @@ In this example, we use [XHTML](/en-US/docs/Glossary/XHTML), [SVG](/en-US/docs/W cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> -

A swarm of motes, governed by two simple principles. +

A swarm of motes, governed by two basic principles. First, each mote tries to move towards the cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural diff --git a/files/en-us/web/svg/tutorial/getting_started/index.md b/files/en-us/web/svg/tutorial/getting_started/index.md index ae2151bc24b285c..a228234909f7abc 100644 --- a/files/en-us/web/svg/tutorial/getting_started/index.md +++ b/files/en-us/web/svg/tutorial/getting_started/index.md @@ -8,9 +8,9 @@ page-type: guide {{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }} -## A simple example +## A basic example -Let us dive straight in with a simple example. Take a look at the following code. +Let us dive straight in with an example. Take a look at the following code. ```xml ` elements: a cubic one, called with `C`, and a quadratic one, called with `Q`. +There are three different commands that can be used to create smooth curves. Two of those curves are [Bézier curves](/en-US/docs/Glossary/Bezier_curve), and the third is an "arc" or part of a circle. You might have already gained practical experience with Bézier curves using path tools in Inkscape, Illustrator or Photoshop. There are an infinite number of Bézier curves, but only two are available in `` elements: a cubic one, called with `C`, and a quadratic one, called with `Q`. ### Bézier Curves diff --git a/files/en-us/web/svg/tutorial/positions/index.md b/files/en-us/web/svg/tutorial/positions/index.md index 2ad2fbaa344dbf4..df06bf4b3a0cd69 100644 --- a/files/en-us/web/svg/tutorial/positions/index.md +++ b/files/en-us/web/svg/tutorial/positions/index.md @@ -38,7 +38,7 @@ Without further specification, one user unit equals one screen unit. To explicit … ``` -The above element defines a simple SVG canvas with 100x100px. One user unit equals one screen unit. +The above element defines an SVG canvas with 100x100px. One user unit equals one screen unit. ```html … diff --git a/files/en-us/web/svg/tutorial/svg_and_css/index.md b/files/en-us/web/svg/tutorial/svg_and_css/index.md index 0f640869742a5fd..37f2c15e8f0dbe1 100644 --- a/files/en-us/web/svg/tutorial/svg_and_css/index.md +++ b/files/en-us/web/svg/tutorial/svg_and_css/index.md @@ -10,7 +10,7 @@ page-type: guide This page illustrates the application of CSS to the specialized language for creating graphics: [SVG](/en-US/docs/Web/SVG). -Below you'll create a simple demonstration that runs in your SVG-enabled browser. +Below you'll create a demonstration that runs in a browser. > [!NOTE] > Elements referenced by {{SVGElement("use")}} elements inherit the styles from that element. So to apply different styles to them you should use [CSS custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables). diff --git a/files/en-us/web/svg/tutorial/svg_fonts/index.md b/files/en-us/web/svg/tutorial/svg_fonts/index.md index 110a14f38f2f18a..b918a5a673f2204 100644 --- a/files/en-us/web/svg/tutorial/svg_fonts/index.md +++ b/files/en-us/web/svg/tutorial/svg_fonts/index.md @@ -8,12 +8,7 @@ page-type: guide {{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }} -When SVG was specified, support for web fonts was not widespread in browsers. Since accessing the correct font file is, however, crucial for rendering text correctly, a font description technology was added to SVG to provide this ability. It was not meant for compatibility with other formats like [PostScript](https://www.adobe.com/products/postscript.html) or [OTF](https://fonts.google.com/knowledge/glossary/open_type), but rather as a simple means of embedding glyph information into SVG when rendered. - -> [!NOTE] -> SVG Fonts are currently supported only in Safari and Android Browser. -> -> The functionality was [removed from Chrome 38](https://chromestatus.com/feature/5930075908210688) (and Opera 25) and Firefox [postponed its implementation indefinitely](https://bugzil.la/119490) to concentrate on [WOFF](/en-US/docs/Web/CSS/CSS_fonts/WOFF). Other tools, however, like Batik and parts of Inkscape support SVG font embedding. +When SVG was specified, support for web fonts was not widespread in browsers. Since accessing the correct font file is crucial for rendering text correctly, a font description technology was added to SVG to provide this ability. It was implemented as a means of embedding glyph information into SVG when rendered. The base for defining an SVG font is the {{ SVGElement("font") }} element. @@ -54,7 +49,7 @@ The {{ SVGElement("font-face") }} element is the SVG equivalent of the CSS [`@fo Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' `src` descriptor in `@font-face` declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead. -Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can add a `d` attribute — this defines a shape for the glyph exactly like how standard SVG paths work. +Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For basic glyphs, however, you can add a `d` attribute — this defines a shape for the glyph exactly like how standard SVG paths work. The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is `unicode`. It defines the unicode code point represented by this glyph. If you also specify the [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) attribute on a glyph, you can further restrict it to certain languages (represented by `xml:lang` on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents. @@ -66,7 +61,7 @@ Two more elements can be defined inside `font`: {{ SVGElement("hkern") }} and {{ ## Referencing a font -When you have put together your font declaration as described above, you can just use a simple `font-family` attribute to actually apply the font to some SVG text: +When you have put together your font declaration as described above, you can just use the `font-family` attribute to actually apply the font to some SVG text: ```html diff --git a/files/en-us/web/svg/tutorial/texts/index.md b/files/en-us/web/svg/tutorial/texts/index.md index 54f433e8e1cd334..8a2ed2cccdabfd5 100644 --- a/files/en-us/web/svg/tutorial/texts/index.md +++ b/files/en-us/web/svg/tutorial/texts/index.md @@ -20,7 +20,7 @@ We have seen in the [introducing example](/en-US/docs/Web/SVG/Tutorial/Getting_S The `x` and `y` attributes determine where in the viewport the text will appear. The attribute {{SVGAttr("text-anchor")}}, which can have the values `"start"`, `"middle"`, `"end"` or `"inherit"`, decides in which direction the text flows from this point. The attribute {{SVGAttr("dominant-baseline")}} decides the vertical alignment. -Like with the shape elements, text can be colorized with the `fill` attribute and given a stroke with the `stroke` attribute. Both may also refer to gradients or patterns, which makes simple coloring text in SVG very powerful compared to CSS 2.1. +Like with the shape elements, text can be colorized with the `fill` attribute and given a stroke with the `stroke` attribute. Both may also refer to gradients or patterns, which makes coloring text in SVG very powerful. ## Setting font properties