Issue with SVG generally

MDN URL: https://developer.mozilla.org/en-US/docs/Web/SVG

What information was incorrect, unhelpful, or incomplete?

Am trying to grasp the basics for SVG. A general problem here is that the documenters seem keen to show "tricky" details before the simple elements are clear. Here's what I believe would be helpful:

What did you expect to see?

<svg ....>Is this a requisite for all SVG elements. In other words, must I make an SVG "box" before any RECT, LINE etc elements will paint? This appears to be the case, but it would be helpful to see this made clear.
What is the minimum requirement for the SVG box? I don't like the clutter of the xml and other specs as I suspect these (like those for HTML) will eventually not be required. It appears that Firefox currently doesn't REQUIRE them.
Basics: the x,y elements of RECT, LINE etc appear to be relative to the SVG box but I can't be sure of this, especially since there doesn't appear to be an X,Y for the SVG box.
Are the quotes around X,Y,WIDTH,HEIGHT values necessary? It would appear so but they are an encumbrance when coding in PHP (backslashes are required before all such quotes. Yes, addslashes ... but...)

Did you test this? If so, how?

I have spent a couple of hours trying to grasp what I am feel sure should be possible to grasp within 15 minutes. I do appreciate all that developers offer here for free but sometimes those efforts go for naught if visitors like myself have to seek simpler explanations elsewhere, which is unfortunately often the case Mozilla.

MDN Content page report details

* Folder: `en-us/web/svg/tutorial/fills_and_strokes` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/svg/tutorial/fills_and_strokes/index.html * Last commit: https://github.com/mdn/content/commit/591106ab561137d3a0714d1b642ebd2319ad87ea * Document last modified: 2021-03-23T09:20:01.000Z

I agree that the SVG docs could use some more attention. Out of interest, did you find https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial ? It looks good to me although the "advanced" sections are missing. But it's not clearly linked from https://developer.mozilla.org/en-US/docs/Web/SVG.

Thank you for the response and the link. I will examine that more closely. However, after about a day's research and experimentation I have managed to come up with the following basics (below) that I believed could have saved me (or anyone else) several hours.

I do realize that SVG can and is used for a wide variety of problems far more exotic than what I want it for. However, I suspect that many people start with something simple and progress from there. Here is the problem I was attempting to solve. I have a database, listing the birthdate and date of death (born, died) of perhaps 100 Renaissance artists, stretching over some four centuries. I wish to represent these lives in a graphical way, on a timeline http://www.jbwalker.com/WalkerFownes/Hiking/Tuscany/Renart/newtimeline.php, showing a series of bars. The link shows the somewhat unsatisfactory approach I am currently using using imgs. I wished to replace the current bars with svg rectangles. That's it! Not as exotic as a helicopter on Mars but a gateway to greater things.

The following notes apply specifically to this use of SVG that is to be included on a web page containing other HTML elements. The notes are rudimentary and further details and clarifications and perhaps corrections could be added. Note how elementary all this must seem to someone of any experience with SVG. But I think that is the problem. This is a day's work because, while elementary, it is not self-evident.

All svg shapes (RECT, LINE, etc) must be defined within an SVG element
The SVG element defines a box within which the individual elements are confined.
- The SVG box itself acts like any HTML element and is positioned accordingly. The box can be repositioned with inline or other css
- The SVG element is filled in examples at respectable sites with such details as "xmlns="http://www.w3.org/2000". Such details no doubt tie this SVG to a particular version of SVG but it is not essential: a simple
- Individual (RECT,LINE etc) elements have x,y coordinates relative to the containing SVG box. Thus an SVG RECT shape positioned absolutely on a page at left:300;top:500 and having an X,Y of 5,5 will be positioned on the page (top,left corner) at 505px from the top and 305px from the left edge.
- Any part of the element which falls outside the box will not display. For example, if a circle whose centre is defined as (x,y) 5,5 and radius 5 is defined inside a box that has a width/height of 5/5 then only 1/4 of the circle will show.
Dimensions, such as height, width, x, y are expressed as pixels (px) by default but the px should not be included. On websites, they are usually shown in double quotes. This is a burden when using languages such as PHP, where such quotes have to be escaped. These quotes can be omitted

I considered signing up to attempt this documentation myself, but found that that too would involve more effort to get started than I have time for.

Thanks again for the reply. I hope this helps someone.

John

On Sat, Apr 24, 2021 at 9:28 AM wbamberg @.***> wrote:

I agree that the SVG docs could use some more attention. Out of interest, did you find https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial ? It looks good to me although the "advanced" sections are missing. But it's not clearly linked from https://developer.mozilla.org/en-US/docs/Web/SVG.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mdn/content/issues/4428#issuecomment-826117659, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC7DE5RQOBND7VJ4B4YOVSLTKLWTBANCNFSM43PG4ESQ .

@jobowo Thank you for opening this issue. I'm listed as topic owner for SVG and will use this feedback once I find the time to care more for SVG (since I work on MDN in my spare time).

SVG is often controlled via a library such as d3.js, since it can have some tricky parts. For example, the origin is in top-left (you might think of bottom left corner from a math standpoint) with x going towards the right and y downwards. So thinking of diagrams require some coordination transformation.

SVG can also be saved on disk and displayed via a viewer. In such cases, it is interpreted as XML file, which requires the XMLNS attribute (XML NameSpace) as well as <?xml version="1.0" encoding="UTF-8" standalone="no"?> (similar to a Document Type Definition). Or it can be even generated by applications like Inkscape.

SVG 2.0 simplified some of the legacy aspects of SVG 1.1, which was around for some years.

You can declare elements to be outside of the view. The viewBox (casing is important) defines which part of the SVG coordination system is shown. Dimensions are not declared as pixels, but in relation to that viewBox. That makes the image scalable in the first place :smiley_cat:

If you want to create elements with JavaScript, be aware, that you'll need createElementNS with the SVG namespace URI (the value of xmlns).

Would it be fine with you, if I'll add you as Co-Author once I update the linked introduction page?

Hi André

Thanks for the reply and clarifications, and for providing what you do for MDN. Very much appreciated. At the bottom of this is a brief resume, so that you can more easily anticipate what is within my range and what is not.

It is becoming increasingly clear to me that SVG has diverse application, but that creates some of this problem of murkiness. I want my simple concept-space explained clearly but the explanations are cluttered with issues that do not apply to me. Your response is a good example--and this is not a criticism of your response! You are trying to solve everyone's problems and I'm only interested in what applies to me. I'm not sure whether this is possible but it might help to partition these areas of interest so that there is less confusion.

SVG-in-the-context-of-simple-web-page-application

I conceive this as the "gateway" problem. Once through the gate, the sheep/cows/goats (no derogatory associations intended) will wander off to their preferred pastures, but they all have to get through the gate first, so this is a good starting point. I suggest that this is kept very straightforward (the goal of learning this version of SVG in 15 minutes would be a good one). The might be followed by equally brief "leader" sections that show next steps, or adjustments to the basics that are needed for particular areas:

You can declare elements to be outside of the view. The viewBox (casing is important) defines which part of the SVG coordination system is shown. Dimensions are not declared as pixels, but in relation to that viewBox. That makes the image scalable in the first place

This explanation is not clear for me. I have seen reference to the viewBox but it is clearly not essential. Width and height would seem to imply a viewBox but that is not clear. Anything outside that box seems to disappear (my 1/4 circle example) so am not sure what the result of "You can declare elements to be outside of the view" is. And "in relation to" that viewbox is entirely undefined. What "relation"? Percentage? I have also seen somewhere that the dimensions can have other measures, such as Pt etc, but the default seems to be pixels as my svg rect sizes seem to be exactly in pixels. My suspicion is that what you are saying is that you can use the viewBox to scale up/down the shapes inside.

I think this is a good example of

Further topics

For those who wish to pursue SVG into more sophisticated uses...

If you want to create elements with JavaScript, be aware, that you'll need createElementNS https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS with the SVG namespace URI (the value of xmlns).
SVG is often controlled via a library such as d3.js, since it can have some tricky parts.
SVG can also be saved on disk and displayed via a viewer. In such cases, it is interpreted as XML file, which requires the XMLNS attribute (XML NameSpace) as well as <?xml version="1.0" encoding="UTF-8" standalone="no"?> (similar to a Document Type Definition). Or it can be even generated by applications like Inkscape.

I've actually been using Inkscape quite a bit lately, but I usually convert those SVGs to PNG files. I gather that processing of SVG on a web page is cumbersome

RÉSUMÉ

B.Sc(Eng) Hon. in Chemical Engineering from University College London
10 yrs in business programming, Fortran, COBOL, Turbo Pascal; later into systems design, management
15+ years as business consultant, mostly for small business
last 15 years, learned HTML, CSS, MySQL, PHP, javascript (jquery) chiefly as a hobby, writing a travel website.
You might guess that I am no longer in my twenties.

I personally pursue a course that zigzags between two rough boundary fences: on the one hand, I admire the exacting discipline required to write applications that are used in large sites. I managed banking and government IT systems and was exasperated to find sloppy coding everywhere. However, I write relatively small scripts (<5,000 lines) for my own needs, and if I take shortcuts, avoid tricky areas, and generally am a bit lax writing hurried code, that is my business and I alone face the consequences.

Authorship

Looking at all that you and others have done, it would seem as though I have added a period at the end of a long document, and you are offering me equal status! Let's keep up the conversation (I would like to contribute as much as I can) and see where it goes. But of course, if it helps you in some way that is not clear to me, then please, yes.

John

On Sun, Apr 25, 2021 at 4:50 AM André Jaenisch @.***> wrote:

@jobowo https://github.com/jobowo Thank you for opening this issue. I'm listed as topic owner for SVG and will use this feedback once I find the time to care more for SVG (since I work on MDN in my spare time).

SVG is often controlled via a library such as d3.js, since it can have some tricky parts. For example, the origin is in top-left (you might think of bottom left corner from a math standpoint) with x going towards the right and y downwards. So thinking of diagrams require some coordination transformation.

SVG can also be saved on disk and displayed via a viewer. In such cases, it is interpreted as XML file, which requires the XMLNS attribute (XML NameSpace) as well as <?xml version="1.0" encoding="UTF-8" standalone="no"?> (similar to a Document Type Definition). Or it can be even generated by applications like Inkscape.

SVG 2.0 simplified some of the legacy aspects of SVG 1.1, which was around for some years.

You can declare elements to be outside of the view. The viewBox (casing is important) defines which part of the SVG coordination system is shown. Dimensions are not declared as pixels, but in relation to that viewBox. That makes the image scalable in the first place 😺

If you want to create elements with JavaScript, be aware, that you'll need createElementNS https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS with the SVG namespace URI (the value of xmlns).

Would it be fine with you, if I'll add you as Co-Author once I update the linked introduction page?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mdn/content/issues/4428#issuecomment-826311071, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC7DE5V7OXWWRJKBH6EDTVTTKP6WTANCNFSM43PG4ESQ .

Thanks a lot for the report. I'm going to close this for now as this is stale, but it's noted that the SVG docs need to be refreshed and this will be tackled in a follow-up.

Thank you :)

Thank YOU Brian. You do all the hard work. All I do is whine and complain!

John

On Thu, Nov 10, 2022 at 3:25 AM Brian Thomas Smith @.***> wrote:

Thanks a lot for the report. I'm going to close this for now as this is stale, but it's noted that the SVG docs need to be refreshed and this will be tackled in a follow-up.

Thank you :)

— Reply to this email directly, view it on GitHub https://github.com/mdn/content/issues/4428#issuecomment-1310139866, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC7DE5VDTHH2LDVAVE7UT4LWHTLTJANCNFSM43PG4ESQ . You are receiving this because you were mentioned.Message ID: @.***>

mdn / content