How to? > Webdialog icons for retina displays. (SU 2016, both on mac and windows)

Developers Ruby API
,
1

How to? > Webdialog icons for retina displays. (SU 2016, both on mac and windows)

Hi anybody knows if and how we can use either his res images or svg files for UI in SU webdialog?
I’ve tried svg quickly, but so far it didn’t work… yet.
Thanks!

Jeroen
Skalp

2

The UI::WebDialog class uses the MSIE WebBrowser Control on Windows editions, and Safari on Mac editions.

These libraries are dependent upon the installed browser version on the end user’s machine.

For example, SketchUp installed on Windows XP machines, can only have MSIE v8 maximum.

There is also a default browser emulation setting, set by the SketchUp installer for all version and instances of “sketchup.exe” running on Windows machines. (This has been set to MSIE 9 since SketchUp 2015, I believe. But will be increased soon, because of 3rd party web services like Google Maps API, dropping support for all versions of MSIE below v10.)

But you should be trying to target a minimum browser version that works for your dialog, by overriding this in your HTML pages for your WebDialog.

See: MSDN: Specifying legacy document modes (Internet Explorer)

Example, <meta> tag in your WebDialog’s <head> element, to set document mode to MSIE v11:

<meta http-equiv="x-ua-compatible" content="IE=11">

Okay? So what I am getting at here is,

  1. Your page needs to be in standards mode to render SVG, so use a doctype tag at the top of the HTML:
``` _...etc..._

  1. Choose a mode that supports rendering SVG
    (late MSIE 9, v10 or higher is better)

  2. Make sure you do not have any clipping paths in the SVG file interferring with display
    see: SVG not showing in IE11
    and that they are optimized SVG:
    Displaying SVG images in websites with Internet Explorer 10

  3. Make sure the paths to the SVG resources is valid.
    They are relative to the location of the HTML file, … optionally …
    relative to the href path attribute in the <base> element in the <head> section.

  4. Give the SVG icons a height and width based upon either em or pixels.
    see: Fix SVG in tags not scaling in IE9, IE10, IE11

If you will be drawing the icons in the HTML, the see:
MSDN: Adding SVG to a webpage

3

Thanks Dan!

Guess I must have missed some things when trying last time then causing me to give up. At least now I know it should be possible, so’ll give it another chance.
Intersting info in points 3, 4 and 5 + msdn ref.

Jeroen