The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> SVG graphics
Brian Chandler
post Oct 25 2021, 09:51 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



Does anyone here know anything about SVG? Does anyone here know anyone who knows anything about SVG, or anywhere there is reputed to be anyone who does?

The simple inclusion of an svg element in html works, but I cannot find any way to apply styling, e.g. css-positioning, see elsewhere.

I made an SVG graphic and pasted the two lines of stuff I found in the wikipedia article at the top, then saved it here: https://imaginatorium.com/graphics/pink.svg

If you access that page, the svg is there, but Firefox says:

CODE

This XML file does not appear to have any style information associated with it. The document tree is shown below.


How would I know what they mean by "style information"? Help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2021, 01:06 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Positioning works as usual, you just need to do it right. It would be better if you posted your attempt do position the pink dot so we can see what went wrong.


QUOTE(Brian Chandler @ Oct 25 2021, 04:51 PM) *


CODE

This XML file does not appear to have any style information associated with it. The document tree is shown below.


How would I know what they mean by "style information"? Help!


Well, SVG is XML and that's how browsers (all?) display "raw" XML. It works if you embed it in a HTML document, doesn't it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 02:02 PM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 26 2021, 03:06 AM) *

Positioning works as usual, you just need to do it right. It would be better if you posted your attempt do position the pink dot so we can see what went wrong.


(If I just "Reply" to this post, the first line (above) is missing... ???)

I'm not sure if you are responding to my other post, but I was hoping that someone would help me see how I am "doing it wrong", if that is the problem. If it "worked as usual", I think it would have worked. It doesn't. I'm not particularly concerned about positioning the pink dot.

QUOTE

QUOTE(Brian Chandler @ Oct 25 2021, 04:51 PM) *


CODE

This XML file does not appear to have any style information associated with it. The document tree is shown below.


How would I know what they mean by "style information"? Help!


Well, SVG is XML and that's how browsers (all?) display "raw" XML. It works if you embed it in a HTML document, doesn't it?


Well, I know how to include an svg element directly in an html file, but I want to make an independent svg image file, which I can include in an html file using <image>. I see that the browser is unable to see that this is an svg image, despite all the blurb at the top which says it is an svg file, I just wonder what else I have to do. It's probably to do with sending the appropriate content-type header, but I wonder how that could be described as "style information".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2021, 07:10 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And doesn't it work to embed to that SVG with IMG src=...? Why do you need to see it by itself in a browser to do that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 10:34 PM
Post #5


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 26 2021, 09:10 AM) *

And doesn't it work to embed to that SVG with IMG src=...? Why do you need to see it by itself in a browser to do that?


No it doesn't. See the bottom box on my test page: https://imaginatorium.com/testsvg.html
If it can be seen inside an <img> tag, it's going to be visible directly from the browser.

As usual, once I worked out the answer, I could search for it (svg .htaccess) and find it (https://davidwalsh.name/serve-svg-image)
I can't really imagine why the default Apache headers for serving a .svg file are not the headers required to serve an SVG file, but there you go.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 11:01 PM
Post #6


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



So I added this to the .htaccess file in /graphics;

CODE

AddType image/svg+xml .svg .svgz


It does not work, and these are the headers I get from the image file:

CODE

HTTP/1.1 301 Moved Permanently
Date: Tue, 26 Oct 2021 03:56:09 GMT
Server: Apache
Location: https://imaginatorium.com/graphics/pink.svg
Connection: close
Content-Type: text/html; charset=iso-8859-1


Redirecting permanently to itself? What does this even mean, and where is it coming from?

So many questions, so many
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2021, 01:14 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do you get that when you go directly to https://imaginatorium.com/graphics/pink.svg ? I don't, I get the SVG (as XML, that is, the source). The content-type is image/svg+xml according to Rex Swain's HTTP viewer.

I do NOT see the SVG on the page though. Strange indeed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Carrun
post Apr 26 2023, 01:19 PM
Post #8





Group: Members
Posts: 6
Joined: 19-April 23
Member No.: 28,904



I've been using svg for quite some time now, and I've moved all my friends to this format. It's very convenient and loads quickly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:06 AM