SCADA Developer Network

May 11

Browsers always preserves aspect ratio when resizing raster image in SVG

It seems that all modern browsers are ignoring the non-proportioned scaling for raster image in SVG file. If you use Inkscape to resize an embeded/linked raster image in an SVG file, you will find that all browsers will render the raster image in the same aspect/dimention ratio as compare to the original image. Apparently only Inkscape and ASV could interpret non-proportioned raster image scaling.

Comparison was done between Inkscape and browsers in order to elaborate the problem, the IntegraXor logo was used as the raster image, and the blue frame which is the SVG element serves as the border line. The top left image is the original logo, the top right image has been resized in width which wasn’t interpret correctly in browsers, and the medium left image has been resized in height which is also wasn’t inperpreted correctly in browsers. Only the medium right image is rendered correctly in browsers when the image is resized with original aspect ratio.

Last but not least, the bottom image is also rendered correctly in browsers, whereby a trick has been apply by grouping the raster image and the SVG element before the dimension ratio is distorted. In another word, to circumvent this problem is to group the raster image with other SVG element and then scale it together. Otherwise the best thing to do is to avoid scaling or at least scale it in proportion by holding down Ctrl key, in ensuring WYSIWYG in browsers’ display.

Scaled raster image in SVG is not correctly interpreted by browsers

The browser shown in the screenshot is Firefox 4.0. However all other browsers also affected, including IE 9.0.8112.16421 RTM(KB982861), Google Chrome 10.0.648.151, Safari 5.0.3 (7533.19.4) and Opera 11.10 Build 2092. Image showing aspect ratio will be always preserved by browsers.

Mar 07

Running SCADA on iPhone/iPad

Knowledge Base, Web No Comments »

To ensure SCADA mimic can be shown correctly on iPhone or iPad, you must first ensure the SVG graphic can be shown perfectly in Apple Safari, which is the browser used for iPhone/iPad. The screen shot below shown that some SVG gradient effects are not correctly rendered in Safari browser as compared to Firefox, Chrome and IE + ASV. Below described the issues caused the defect of SVG gradient display in Safari.

Safari SVG gradient effect support problem

Safari could not render gradient effect correctly.

Gradient that Repeated with Reflected Effect

Firstly Safari doesn’t support ‘Repeat’ with ‘Reflected’ option. If this option is chosen, no reflection will be seen but only blank area will be shown. The workaround is to duplicate the targeted graphic object and flip it either vertically or horizontally.

Inkscape Fill and Stroke, Gradient:Repeat+Reflected

Gradient Over Horizontal/Vertical Bezier Line’s Stroke

And then this is one of the funny problem for Safari, the gradient effect on stroke only works if the Bezier line is neither horizontal nor vertical.

Gradient over 2 Points Bezier horizontal line will not work

Gradient over 2 points Bezier horizontal line will not work in Safari, it will show solid line instead.

To get rid of this problem, simply use filled rectangle instead. However, for any reason that you must use gradient over horizontal/vertical stroke, you may add one redundant node at the end making it like a L-shape line, but the redundant node must be placed within the width of the stroke so it will not affect the intended graphic look.

Workaround for Gradient over 3 Points L-shape bezier line

Workaround for Gradient on horizontal bezier line by using 3 Points L-shape stroke.

Oct 22

Color compromiser – 256 bit to 16 bit

Web No Comments »

256 colors are not necessary required in most cases. Enter 6 digits (256bit) color code and check out the outcome in 3 digits (16bit). If the difference is acceptable, you can save 3 characters every time a color is used.

Type	Code	Preview
256 bit Color #
16 bit Color #

Oct 07

Function, Object, Status.

Code, Knowledge Base, Web No Comments »

Recently we found that Firefox has changed the type of object of a function. Below is the test code:

<DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FX function status test</title>
</head>
<body>
    <script type="text/javascript">
        function hello() {
            this.hello = "hello";
            this.world = "world";
            this.status = "status";
 
            var txt = this.constructor;
            txt += this.hello + " " + this.world + " " + this.status;
            document.getElementsByTagName('body')[0].innerHTML = txt;
        }
        hello();
    </script>
</body>
</html>

This test attempted to show what type of constructor the function ‘hello’ is on browser, and also the properties ‘hello’, ‘world’ and ‘status’. As the screen shot shown, different browser treats the function object differently, especially Firefox. Latest Firefox (in this case, version 4 beta 6) treated it as an Object. but previous version of Firefox (3.6.3 or older) treated it as an object Window and note that ‘status’ is missing from Firefox’s output as compare to other browsers. This mean Firefox prohibited the usage of property name of “status”. A property name that called “status” can only be used when it is in a Javascript class.

result in various browsers

On the other hand, one foolproof practice is to convert a function object into a new Javascript class like below:

function myFunc() {
    if (!(this instanceof Object)) {
        return new myFunc();
    }
 
    this.hello = "hello";
    this.world = "world";
    this.status = "status";
    return this;
}

This code will fail since Firefox 3.6.8+ updated its instance to Object (as shown in screen shot). As a result, developer need to remove this interlocking code as it’s no longer useful, but the workaround is to call it as a new function class when using it.

Aug 05

‘s’ is short for ‘short’

Web No Comments »

Nowadays many gurus and web developers are so obsessed with fast performance web site. One of the common techniques used is to compress almost everything that will deliver through the Internet connections. Other than multimedia data, Internet data is still very much ASCII or text oriented, so it’s very much about shortening the string when come to compression. We are also concerned about separating static content as cookiesless domain. After looking into all these techniques, the name of the items involved seems to start by letter ‘s’. To prevent wasting any single byte for naming, it make sense to name everything as ‘s’ but leave the extension to differentiate them.

Item	Name	Description
script	s.js	JavaScript files need to be compressed and combined into one, the name is shorten as s.js, whereby ‘s’ stands for script.
style	s.css	CSS files need to be compressed and combined into one, so the name also shorten as s whereby ‘s’ stands for style.
shortcut icon	s.ico	In order to make favicon.ico cacheable, we can’t just name it as favicon.ico and leave it in the root directory, we will also need to shorten the name to s.ico and store it in the static domain, where by ‘s’ stands for ‘shortcut icon’.
static	s.domain.com	In order to create a cookiesless domain, a static directory needs to be created for storing the above contents and also screens or images. So we might as well create a subdomain as s.domain.com, and put almost everything except html files into this directory. ‘s’ is for static, ‘s’ is for screens, ‘s’ is a sum for all.

SCADA Developer Network

Browsers always preserves aspect ratio when resizing raster image in SVG

Running SCADA on iPhone/iPad

Gradient that Repeated with Reflected Effect

Gradient Over Horizontal/Vertical Bezier Line’s Stroke

Color compromiser – 256 bit to 16 bit

Function, Object, Status.

‘s’ is short for ‘short’

Categories

Archives

Links

Recent Posts

Recent Comments