Best practice needed: SVG skinning support with SmartGWT in current browsers

[Blama]

Hello Isomorphic,

I'm looking for a way to easily skin my SVG files with CSS.
I'm using SVGs from flaticon (e.g. http://www.flaticon.com/free-icon/stats-document_36170) and add a style sheet in the file (2nd line added):

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="/myproj/images/svg-style.css"?>
....

The CSS just includes:

path {fill: red !important;)

Now, when I include the image with Img img = new Img("filename.svg"); it is displayed, but not styled (=black icon). When I just open the icon in Chrome or Firefox, it is styled (=red icon).

I'm 100% sure this is not a SmartGWT bug, but perhaps you can tell the best way how to include SVGs in SmartGWT.


The SVG-class seems to be somewhat older, most likely from the time when browsers needed plugins in order to display SVGs.

As one can see for example here, browsers support SVG-stylesheets, but as it seems not for img-tags, but only SVG-tags.

So with your expertise, what is the best way to include SVG-files in SmartGWT so that one can style them with external CSS (either own CSS file or in a style tag in the main html). I tried with v9.1p_2014-04-13 and Chrome34/FF26 using the HTML5 doctype.

Thank you & best regards,
Blama

[Blama]

Hi Isomorphic,

for the sake of completeness: This this forum thread is somewhat related.

Regarding the SVG styling one solution seems to be to use HTML-object tags instead of HTML-img tags.
See this page (info, working example) which works in Chrome34/FF26/IE10.

Is it possible for you to enable the use of object tags in the HTML generation process?

Best regards,
Blama

[Isomorphic]

There are a lot of browser bugs in this area, so a comprehensive discussion may be a bit intractable.

Can you clarify what issue you're having with this approach - are you saying you're seeing this work on a normal HTML page without SmartGWT, and SmartGWT is somehow interfering with this technique?

[Blama]

Hi Isomorphic,

I can get the styling working in all browsers as in "working example" from my last mail, so to answer your question: Yes, it works without SmartGWT, but not with SmartGWT (see below for the reason).

I prepared a ready-to-open testcase (based on the link) in the attached files. The result is:

1. It does not work using <img>-tags in FF26/Chrome34 (works in IE10!)
2. It works using <object type="image/svg+xml" data="foobar.svg.xml">foobar</object>-tags in all browsers
3. It works using <svg>-tags in all browsers
   
4. It does not work using <object>- or <img>-tags using data-URIs in all browsers

As I want to keep my SVG-files as files, my question is if you can (additionally?) support the generation of <object>-tags for com.smartgwt.client.widgets.Img-Objects.
If so, it would be best to have a property one can set with Img.setDefaultProperties(Img i) that defines that all files ending in ".svg" are written out as <object>-tags.

Thank you & Best regards,
Blama



PS: Much information on the SVG+CSS topic can be found here: http://css-tricks.com/using-svg/

[Blama]

Resulting screenshots for my system:

[jlhoward1]

Thank you

The posting is appreciated. I had similar problems with svg on oriented labels in 4.0 facetcharts.

I have found that where Smartgwt does not or has not chosen to support a compatibility feature (adequate svg), I have better results with 3rd party libraries using JSNI (gFoamTree in the forum).

The order in which svg fonts (chrome) are loaded makes a difference. There is no API in Smartgwt to correct this. Skinning does not seem compelling to me.

(You are unlikely to get good results out of IE8 compatibility (vectors). )

http://forums.smartclient.com/showthread.php?t=28101&highlight=JSNI

http://forums.smartclient.com/showthread.php?p=111265

See especially....
http://stackoverflow.com/questions/11487427/is-there-any-font-smoothing-in-google-chrome

[Blama]

Hi jlhoward1,

thanks for your answer. I didn't know about Chrome webfont problems (137692, 331115).
I wanted to use one, but will wait now.

Regarding your Facet/SVG problems: I think that my problem is not related to yours and that for my use-case Isomorphic "only" has to change some tags (if this does not introduce other browser-related issues).
Most likely not something happening in 4.1p/9.1p, which is not important for me and which I totally understand.

Best regards,
Blama

[jlhoward1]

Ah I see

I had thought that you intended that Img.setDefaultProperties(Img i) would affect all Img tags (including those in Drawing graphics and in Facetcharts).

You were seeking a non-global solution for every "user" Img.

Thanks

[Blama]

Hi jlhoward1,

I think I misunderstood you. It seems that we are indeed looking for a similar thing, but I'd guess your request is way more complicated. You want to re-style a dynamically generated Chart with CSS (=without using the available APIs, because there is not every API available you'd need, right?).

I had a look at the generated source for http://www.smartclient.com/smartgwte...e/#simpleChart. The relevant part looks like this (in FF26):

<div id="isc_35" eventproxy="isc_FacetChart_0" class="scChart"
	style="position: absolute; left: 0px; top: 43px; width: 962px; height: 471px; z-index: 201134; overflow: hidden; -moz-box-sizing: border-box; padding: 5px; display: inline-block; cursor: auto;"
	onscroll="return isc_FacetChart_0.$lh()">
	<canvas id="isc_FacetChart_0$436" width="952" height="461" style="display:block" dir="ltr"></canvas>
</div>

So no SVG tag here and I don't see the chart's markup. Assuming it is SVG nevertheless, you'd need a method like FacetChart.setExternalStylesheet(String fileName) which would result in a reference to your CSS file in the SVG's markup. I don't know if this would work.

What I want is way more simple. In order NOT to have different versions of my SVG-files for different color themes, I want to define the SVG's <path> color with CSS. I'd include the reference to the CSS in the SVG-file (the file is stored in the filesystem, not dynamic generated as in the case of the FacetChart).

In order for the browsers to display this CSS-styled SVG, the file must be embedded as <object> and not as <img> in the DOM. I do not know if <canvas> would work as well. So my requirement is just to use a different tag in the markup.

Best regards,
Blama

[Toplak]

Hi everybody.

Is there any solution for displaying SVG in IMG or Src etc. Because I need to change color of SVG with Css. The file must be embedded as <object> but how to implemet this in Smart GWT?

[Blama]

Hi Toplak,

using 6.1p, this should just work now, please see here and here. I did not test it yet, though.

Best regards
Blama