Explore the community Forums Lectora Lectora Questions & Answers Lectora 18 Blurry Text Buttons and Shadows Reply To: Lectora 18 Blurry Text Buttons and Shadows

#414602 Score: 1
Profile photo of Zachary Liquorman
Zachary Liquorman
friend finder
curious george
wise owl
picture perfect
8 pts

I swapped out the Lectora generated buttons for graphical buttons (PNGs) I created in Inkscape.

Why not just use the SVG? Since Lectora won’t let you import an SVG file (seriously, why!?), just copy the <svg> code from the .svg file to an HTML object in Lectora, and then just add whatever code is needed for that button’s functionality.

With the Lectora generated buttons, this phenomena does perplex me a little bit.  I didn’t look at the coding of the Lectora generated buttons that in-depth, but if they’re truly rendered using SVG I should think they would scale better with no blur.  #Strange

The Lectora-included buttons may be rendered via SVG, but that isn’t what makes them salable. SVG is just the code format, not the method. Your PNGs are still just raster images, they’re just being added to the HTML code within SVG tags (as a data URI if I recall correctly, which is essentially a coded “snapshot” of the image the browser can interpret).

More info on image scalability and vector vs raster images:

Image scalability that vector graphics are preferred for comes from the way that vector images are defined in code. Where a data URI is like a “snapshot” of the image, a vector image is a data file (XML) that defines how to draw the image (essentially). SVG code is essentially just a way to save image data (why Lectora places its raster images’ code inside SVG tags though is a mystery to me. Maybe the devs intend to convert the base-included graphics to vector images at some point?). A vector image creation program (e.g. Inkscape) writes the image in code as (essentially) a series of paths and coordinates and color codes (formatted as XML data).

It’s like defining an image by equations that define the lines, coordinates for locations relative to each other, color codes, etc. Viewing an image in Inkscape is like looking at only part of an equation on a graph (e.g. only viewing the graph of values for the equation y=x^2 for values of x between -5 and 5). You can scale it up or down by any amount because you have the ‘equation’ (i.e. code) which defines it. A raster image format like PNG is like saving the same values of the equation y=x^2 for values of x between -5 and 5, but only the values and not the equation itself.

That some raster formats scale better than others is a reflection of how much image data they can store and how compression is handled. PNG, for examples uses a lossess image compression algorithm, so the file size can be reduced without any loss of quality from the original image, but that image cannot “gain quality” if you scale it up. Whereas JPEG can be compressed to a smaller file size, but will lose some of its image quality in the process.

This post has received 1 vote up.