The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> svg image in html, svg image not showing text
Santiago
post Apr 13 2016, 11:13 AM
Post #1





Group: Members
Posts: 4
Joined: 13-April 16
Member No.: 24,158



I am using a svg image to show in a img tab (instead of a , say, png file, I use a svg file as a src.

My image, made with inkscape, contains a circle and a text... the circle shows up, but the text is absent. I suspect there is something to do with the svg format itself.

I don't know how to proceed. Any hints, please, on what to check?

thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 13 2016, 11:17 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



We need to see the page.
Can you post the url to your page or to a test page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Santiago
post Apr 15 2016, 09:34 AM
Post #3





Group: Members
Posts: 4
Joined: 13-April 16
Member No.: 24,158



QUOTE(Frederiek @ Apr 13 2016, 06:17 PM) *

We need to see the page.
Can you post the url to your page or to a test page?


Thanks, I don't have any hosting to test the code "live", I am developing on my own computer, through xampp. CodePen doesn't allow attachments as far as I know

So, my code is as simple as this

<img src="/a.svg">
<img src="/a.png">

where files a.svg and a.png (where the png is an export from the svg) are in the attached zip

The svg shows a different viewport, don't know why, and the text is ignored

thanks


Attached File(s)
Attached File  a.zip ( 68.98k ) Number of downloads: 47
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2016, 11:41 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,546
Joined: 9-August 06
Member No.: 6



Open the SVG in a text editor. It doesn't contain the text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Santiago
post Apr 15 2016, 01:51 PM
Post #5





Group: Members
Posts: 4
Joined: 13-April 16
Member No.: 24,158



QUOTE(pandy @ Apr 15 2016, 06:41 PM) *

Open the SVG in a text editor. It doesn't contain the text.


thanks

I see the text (Algalia) in lines 394 and 406

Maybe I am misunderstanding you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2016, 06:22 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,546
Joined: 9-August 06
Member No.: 6



Sorry, you are right. I must have misspelled it when I searched for it.

I'm afraid I don't know what's wrong. I played a little with SVG when it was fairly new and we needed a browser plugin to use it, but I just made a few small animations by hand coding them so this is a over my head. I think it has to do with font color or the transitions though, that you somehow have managed to make the text invisible. If you open the a.svg directly in a browser, do an CTRL+A and copy, what you have on the clipboard is the below. So the text is there even in the browser. Just not visible.
CODE

    Algalia    Algalia  
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 16 2016, 08:29 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I didn't know Inkscape used so much code for such an in fact simple file.
I don't have Inkscape installed, but I opened the a.svg in Illustrator and this is what I see:

Attached Image

The oval is outside the specified space and no text could be found in any layer.

You might try again with another app, such as Adobe Illustrator or an online svg editor, e.g. http://editor.method.ac or http://svg-edit.googlecode.com/svn-history...svg-editor.html .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 16 2016, 09:17 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,546
Joined: 9-August 06
Member No.: 6



Yeah, I was also surprised by the amount of markup. Lots of proprietary stuff there too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Santiago
post Apr 16 2016, 01:14 PM
Post #9





Group: Members
Posts: 4
Joined: 13-April 16
Member No.: 24,158



Thanks
It was my fault. The texts I wrote were "flowed texts", since they were dragged. Just by converting to text (text menu->convert to text), and realigning if necessary, they magically appear.

Seems that flowed text (whatever it is) is not yet supported by all browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 16 2016, 01:36 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,546
Joined: 9-August 06
Member No.: 6



Ah. Mystery solved. Even if we don't know what it means. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 24th April 2017 - 12:30 AM