Remove simple part 7: SVG files (#36778)

files/en-us/web/svg/attribute/fill/index.md

@@ -53,7 +53,7 @@ svg {
 
 ```html
 <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Simple color fill -->
+  <!-- Basic color fill -->
   <circle cx="50" cy="50" r="40" fill="pink" />
 
   <!-- Fill circle with a gradient -->

files/en-us/web/svg/attribute/stroke/index.md

@@ -40,7 +40,7 @@ svg {
 
 ```html
 <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
-  <!-- Simple color stroke -->
+  <!-- Basic color stroke -->
   <circle cx="5" cy="5" r="4" fill="none" stroke="green" />
 
   <!-- Stroke a circle with a gradient -->

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
 <div class="controls">

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
 

files/en-us/web/svg/element/rect/index.md

@@ -21,7 +21,7 @@ svg {
 
 ```html
 <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Simple rectangle -->
+  <!-- Regular rectangle -->
   <rect width="100" height="100" />
 
   <!-- Rounded corner rectangle -->

files/en-us/web/svg/element/set/index.md

@@ -7,7 +7,7 @@ browser-compat: svg.elements.set
 
 {{SVGRef}}
 
-The SVG **`<set>`** element provides a simple means of just setting the value of an attribute for a specified duration.
+The SVG **`<set>`** 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.
 

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'/>
     </svg:svg>
 
-    <p>A swarm of motes, governed by two simple principles.
+    <p>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

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
 <svg version="1.1"
@@ -68,7 +68,7 @@ The rendering process involves the following:
 
 ## SVG file types
 
-SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).
+SVG files come in two flavors. Normal SVG files are text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).
 
 Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately, it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from a Microsoft IIS server, and Firefox cannot load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a web server that you know will serve it correctly (see below).
 
@@ -89,7 +89,7 @@ Content-Encoding: gzip
 Vary: Accept-Encoding
 ```
 
-You can check that your server is sending the correct HTTP headers with your SVG files by using the [Network Monitor panel](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html#headers) or a site such as [websniffer.com](https://websniffer.com/). Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the [server configuration page](https://www.w3.org/services/svg-server/) on the w3.org for a range of simple solutions.
+You can check that your server is sending the correct HTTP headers with your SVG files by using the [Network Monitor panel](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html#headers) or a site such as [websniffer.com](https://websniffer.com/). Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the [server configuration page](https://www.w3.org/services/svg-server/) on the w3.org for a range of solutions.
 
 Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.
 

files/en-us/web/svg/tutorial/introduction/index.md

@@ -16,7 +16,7 @@ SVG came about in 1999 after several competing formats had been submitted to the
 
 ## Basic ingredients
 
-[HTML](/en-US/docs/Web/HTML) provides elements for defining headers, paragraphs, tables, and so on. In much the same way, SVG provides elements for circles, rectangles, and simple and complex curves. A simple SVG document consists of nothing more than the {{ SVGElement('svg') }} root element and several basic shapes that build a graphic together. In addition, there is the {{ SVGElement('g') }} element, which is used to group several basic shapes together.
+[HTML](/en-US/docs/Web/HTML) provides elements for defining headers, paragraphs, tables, and so on. In much the same way, SVG provides elements for circles, rectangles, and simple and complex curves. A basic SVG document consists of nothing more than the {{ SVGElement('svg') }} root element and several basic shapes that build a graphic together. In addition, there is the {{ SVGElement('g') }} element, which is used to group several basic shapes together.
 
 Starting from this basic structure, the SVG image can become arbitrarily complex. SVG supports gradients, rotations, filter effects, animations, interactivity with JavaScript, and so on. But all these extra features of the language rely on this relatively small set of elements to define the graphics area.
 

files/en-us/web/svg/tutorial/paths/index.md

@@ -107,11 +107,11 @@ The relative forms of these commands can also be used to draw the same picture.
 
 The path will move to point (`10`, `10`) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.
 
-In these examples, it would probably be simpler to use the {{SVGElement("polygon")}} or {{SVGElement("polyline")}} elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.
+In these examples, it would probably be more intuitive to use the {{SVGElement("polygon")}} or {{SVGElement("polyline")}} elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.
 
 ## Curve commands
 
-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 simple ones are available in `<path>` 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 `<path>` elements: a cubic one, called with `C`, and a quadratic one, called with `Q`.
 
 ### Bézier Curves
 

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
 <svg width="100" height="100">…</svg>
 ```
 
-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
 <svg width="200" height="200" viewBox="0 0 100 100">…</svg>

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).

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
 <font>

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