Using Other File Formats

00:00 Other file formats. So far, all of the QR codes created have been PNG files, which results in a bitmap of pixels, but Segno supports other file formats. While you’ll often be using PNG files, it is good to know other file formats which may be useful in different situations.

00:20 While PNG files will be good for most uses, you may have situations where the QR code needs to be resized to be much larger, and that’s where an SVG version of the code will come in useful.

00:32 It is of course possible to resize PNG images to be larger, but it’s also possible to make a mistake when doing this resulting in a QR code with blurred edges that makes it harder to scan.

00:43 Fortunately, Segno can create SVG files easily. The only initial change needed is to alter the file name extension from PNG to SVG.

00:59 At first glance, this QR code may look the same as the PNG equivalent, and you can see the two of them side by side on screen. A closer look at the files will reveal that the SVG file is quite a bit larger than the PNG equivalent, although neither of them is large by any modern standard as both are under a kilobyte.

01:19 While an in-depth examination of the SVG file format is beyond the scope of this course, the most important thing to know about SVG images is that they are XML based, so you can open up the file in a text editor and take a look at the code which creates the image.

01:36 You can see that there are just three lines of code in this simplest of SVG QR codes. The first line defines the XML version, the second, the XML namespace that’s in use, along with width, height, and class of the SVG image.

01:51 And finally a third line, which would be all on one line by default, which contains the description of how to draw the QR code as an SVG path. As already mentioned, a full discussion of the way SVG graphics works is beyond the scope of this course, but in essence, the instructions start at the top left of the QR code and draw out the lines of the code in order with a pen moving to create a horizontal line indicated by H or moving without drawing indicated by an M.

02:21 The first few instructions in this SVG file, as seen being executed on screen with the code having spaces inserted into it to make it more easily human readable.

02:33 If you want to learn more about how the SVG file format works, then the full description of the format is given at the link seen on screen. And now you know what’s happening in an SVG file, let’s see some of the options that Segno offers when creating SVG QR codes.

02:49 Firstly, you can make use of the scale= argument while the SVG format is vector-based, there is still scale present, and setting the file to the required size is a good idea.

03:00 It works in the same way as you’ve already seen.

03:10 Whether you see this difference will depend on the way you are opening the file. If you open it in Inscape, the two may appear to be identical until you perform an action such as exporting to a bitmap when the size difference will become apparent.

03:25 However, opening both files in a browser will show the difference in size, and this can be important when you’re embedding SVG in HTML. In many modern contexts, the XML declaration is superfluous and you can omit it by using the argument seen on screen.

03:53 As you can see from the SVG file on screen, the output no longer contains the declaration.

04:01 In an HTML five context, the namespace definition is also superfluous, so it can be omitted with a different argument.

04:15 As you can now see on screen, the SVG file now contains just a single line, but you may find that opening the file in a browser no longer works as the SVG code would need to be embedded in an HTML five context to work.

04:33 It’s also possible to create a QR code, which will fill the browser screen by omitting the size and replacing it with a viewBox argument in the file.

04:42 This is done by removing the previous code that omitted the SVG namespace and then adding mid-size=true.

04:54 When you open this file in a browser, it should fill the window as much as possible, which can be useful when working with smaller screens in particular. There may be situations where generating a PDF containing only a QR code is needed, and Segno can do this all in one step, removing the need for another dependency and multiple steps of creating a graphic file and then embedding that into a PDF.

05:20 Simply change the file extension to PDF and you’ll be ready to go.

05:28 The arguments shown are the ones supported for the appearance of the QR code and running this script will generate a PDF containing just the QR code as specified.

05:39 There is another argument that can be used: compresslevel. This allows the amount of compression applied to the file to be controlled. The default is nine, which is the maximum, but it can be reduced or disabled with zero as seen on screen.

05:56 Even with this small test example, the file size is more than doubled when turning compression off.

06:04 In the next section of the course, you’ll look deeper at some of the other formats which Segno supports.