I created a hypothetical logo for my digital media class.. and I applied the filter once and it worked.. but there were a couple items that didn't turn out right so when I tried to redo those parts.. then apply the filter to the new parts.. those parts become invisible in the browser. I even tested using a new.. blank file.. typed some text and that showed up fine.. but after applying the filter.. it disappeared This PNG file is what it is SUPPOSED to look like...
but this is what it actually looks like...
(I am using firefox by the way)
Items wont show in browser after using filter
-
Cdavis10@ggc
- Posts: 3
- Joined: Sun Feb 26, 2012 2:58 pm
Re: Items wont show in browser after using filter
which filter, specifically, and which version of firefox have you tested it in?
-
Cdavis10@ggc
- Posts: 3
- Joined: Sun Feb 26, 2012 2:58 pm
Re: Items wont show in browser after using filter
specifically the ABC's > Spectacular light is the filter I was using. and Im using the current version of firefox. but it wont show in IE either.
Re: Items wont show in browser after using filter
I'm confused about which version is the one missing a filter effect. You said the PNG is the correct one, but the SVG actually looks better to me. Are you talking about the filter on the words "Web Design", just to be clear? It looks like you used a different font in the SVG than what shows up in the PNG. Also, the "hristina" and "avis" have slightly different placements between PNG and SVG.
Or maybe I don't see the PNG properly, since I'm using FF? When you put it "in the browser" are you using the SVG or PNG?
At this point, it might be better to use the PNG. Even though FF does display a lot of SVG files, it's not capable of displaying all SVGs. And IE has only just begun to display SVG, with IE9. It probably doesn't display as many SVGs as FF, yet.
Or maybe I don't see the PNG properly, since I'm using FF? When you put it "in the browser" are you using the SVG or PNG?
At this point, it might be better to use the PNG. Even though FF does display a lot of SVG files, it's not capable of displaying all SVGs. And IE has only just begun to display SVG, with IE9. It probably doesn't display as many SVGs as FF, yet.
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Items wont show in browser after using filter
IE9 doesn't support filters at all. Apparently IE10 will have support, and will even be using hardware acceleration which should give great performance, but it's not yet a stable release. Other browsers' support will vary depending on the version and even the platform it's running on (Windows, Linux, MacOS, iOS, Android...).
In my experience there are too many differences between browsers to safely use native SVG without significant testing across multiple browsers and platforms. It's not just filters either; I've seen issues with patterns and text rendering differently between different browsers on the same machine, let alone considering other platforms.
My advice currently would be to use the PNG rendered version for logos, pictures and things like that - unless you want to do a lot of testing. I long for the day when complex artistic images will render equally well across browsers - it would drastically reduce our bandwidth requirements, for a start! - but I suspect we're a good few years away from that (by which time SVG2 will be out, we'll all be using the shiny new features from that, and there will be a whole new collection of compatibility issues).
In my experience there are too many differences between browsers to safely use native SVG without significant testing across multiple browsers and platforms. It's not just filters either; I've seen issues with patterns and text rendering differently between different browsers on the same machine, let alone considering other platforms.
My advice currently would be to use the PNG rendered version for logos, pictures and things like that - unless you want to do a lot of testing. I long for the day when complex artistic images will render equally well across browsers - it would drastically reduce our bandwidth requirements, for a start! - but I suspect we're a good few years away from that (by which time SVG2 will be out, we'll all be using the shiny new features from that, and there will be a whole new collection of compatibility issues).
Re: Items wont show in browser after using filter
Off topic:
Xav wrote:....but I suspect we're a good few years away from that (by which time SVG2 will be out, we'll all be using the shiny new features from that, and there will be a whole new collection of compatibility issues).
Rats! I've been hoping we would be transitioning to good enough SVG support in all major browsers, within a few years, not to have to use PNG, et. al. anymore. Oh well, I can still hope, right?
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Items wont show in browser after using filter
Off topic:
brynn wrote:Xav wrote:....but I suspect we're a good few years away from that (by which time SVG2 will be out, we'll all be using the shiny new features from that, and there will be a whole new collection of compatibility issues).
Rats! I've been hoping we would be transitioning to good enough SVG support in all major browsers, within a few years, not to have to use PNG, et. al. anymore. Oh well, I can still hope, right?
My take on it is this:
1) PNG and other raster images basically consist of a load of "paint this pixel red and that one blue" instructions. It's like painting-by-numbers. If you give a group of people (i.e. several browsers) the same paint-by-numbers set you'll get broadly the same result.
2) SVG is a series of instructions about how to draw your image. When the instructions are simple (draw a circle, this colour, this radius, these coordinates) then your group of people stand a good chance of reproducing the same image. When the instructions get complex, there's more scope for each person to interpret things differently, and you can get different results.
So if you want something to be consistently displayed across browsers, use PNG. Simple SVG generally works well across browsers (those that support SVG, anyway). But as the complexity of your SVG increases, so does the likelihood of it mis-rendering on one or more browsers.
-
Cdavis10@ggc
- Posts: 3
- Joined: Sun Feb 26, 2012 2:58 pm
Re: Items wont show in browser after using filter
the words " web design" does not show up in the SVG. and it is supposed to.. its there... just cant see it with the filter on. and yes the font is different I did that on purpose.
and I cant use the PNG because that would defeat the purpose of the assignment for my digital media class which was to make a vector graphics image. and it had to stay in SVG format when submitted. I ended up just changing the font a little on the words web design and left off the filter so I could turn it in before it was late. but it would still be nice to know WHY the words " web Design" does not show up when I add a filter to it. ( and the inkscape software I use is the current version up for download for win 7)
PS the rest of the image has the filters.. and show up fine.. but not the words " web design".. and when I try to recreate the whole thing in a new file.. Nothing shows with the filters.. that confuses me... The initials.. my name.. have the filters applied.. and they show up on my original version, but the words web design.. and any new attempts to add the filters.. do not show. I don't know what I did that first time to make the filter show through perfectly fine.. but NOT show up for that ONE PHRASE nor on any future attempts to recreate the image. its the same no matter what browser I use
and I cant use the PNG because that would defeat the purpose of the assignment for my digital media class which was to make a vector graphics image. and it had to stay in SVG format when submitted. I ended up just changing the font a little on the words web design and left off the filter so I could turn it in before it was late. but it would still be nice to know WHY the words " web Design" does not show up when I add a filter to it. ( and the inkscape software I use is the current version up for download for win 7)
PS the rest of the image has the filters.. and show up fine.. but not the words " web design".. and when I try to recreate the whole thing in a new file.. Nothing shows with the filters.. that confuses me... The initials.. my name.. have the filters applied.. and they show up on my original version, but the words web design.. and any new attempts to add the filters.. do not show. I don't know what I did that first time to make the filter show through perfectly fine.. but NOT show up for that ONE PHRASE nor on any future attempts to recreate the image. its the same no matter what browser I use
Re: Items wont show in browser after using filter
I've got no idea how the problem occurred, but it looks to me like a couple of the filter elements are referencing the wrong thing. If you open the SVG file in a text editor and search for "feComposite6281" and "feComposite6283" you'll see that they both have a section that refers to "result91". If you change those references to "result1" then the filter works (at least on my Linux box running Firefox).
The way I discovered this is that - on my system at least - duplicating the problem text then removing the original caused the file to load okay. I checked the differences between the two files, and that was the thing that looked most suspicious to me.
As I said, I've got no idea how it happened, but you can try either editing the file in a text editor, or duplicating the text and removing the original and see if it works for you.
The way I discovered this is that - on my system at least - duplicating the problem text then removing the original caused the file to load okay. I checked the differences between the two files, and that was the thing that looked most suspicious to me.
As I said, I've got no idea how it happened, but you can try either editing the file in a text editor, or duplicating the text and removing the original and see if it works for you.

