Profile cover photo
Profile photo
Xmplar
Pictures you can poke a stick at
Pictures you can poke a stick at
About
Xmplar's posts

Post has attachment
Check out the latest video showcasing the key features of Draw SVG, an online vector design tool. https://youtu.be/CzNb-1U2Uqg

Create visual documents with SVG – Part 9: Looking ahead for applications

Technical communicators often say they can’t draw, which is apparently what stops us from using graphics more in documents. What might be more to the point is that we don’t know what to draw and why we should be drawing anything at all (‘we use screenshots of the software, so isn’t that enough?’).

If technical communicators were inspired by what we could do with technical illustrations and how to use them to bring our documents to life, we would become more visually literate.

The SVG examples outlined in previous posts come from an ebook authoring product called cop-e-boox, which you can download from http://www. It is intended only as a proof of concept, showing how hyperlinked graphics can be integrated into web documentation.
The infographics in the visual interface were inspired by the end result of using the software – in the case of the previous examples, the end product is a book, so the interface resembles the pages of a book and the graphics showing the components of a book are recognisable.

As I was going through the process of thinking what infographics to draw, I kept in mind the overall conceptual structure of stylesheets in the product, and other parts of the documentation, and the processes that users need to follow to move from one task to another when setting up ebook styles. By sketching out this documentation right from the start, and only later creating conventional written WebHelp documentation to supplement the graphics, I gained a better understanding of the product’s overall structure. I was able to plan each page of the interface to convey that overall structure to users – infographics that show how tasks in the software are linked. This allows users to know from the outset where they are going when they carry out smaller topic-based tasks.
A technical communicator can use symbols and icons familiar to users to draw the end product of what the software they are documenting actually produces, or the things that the software or service helps them manage. Even if you draw only one or two SVG diagrams, they can act as a visual table of contents. And when the graphics are hyperlinked, they can be a stepping-off point to other parts of text-based documentation.

Create visual documents with SVG – Part 8: Advantages for graphic production

You could use SVG simply as an alternative graphics format for high-resolution viewing. But to make it really useful for web documents, hyperlinking is an obvious function to add. It takes a little JavaScript to make SVG do things, and there are JavaScript libraries on the web that can help to make some interactive products. Also, SVG ‘filters’ can turn otherwise flat-looking graphics into visually appealing 3D objects with drop shadows and highlights – think of what smartphone and tablet icons look like.

Finally, SVG is lightweight. You don’t need a content management system or database software to produce hyperlinks or prepare translatable graphics (although it helps to speed things up in production) – you can get by with hand-coding in a decent editor, or you can produce more interactive designs with an SVG editor such as Inkscape. It is also a flexible format if you need to add more graphics to an existing SVG diagram. You can draw new graphics in an illustration package, export as SVG, and paste them into an existing diagram. 

At a late stage of designing documentation, I drew a help icon (a question mark in a blue circle) in Adobe Illustrator and exported it as SVG. I was able to paste that coding straight into existing SVG pages, and display the help icon in several places by referring to that one piece of code (draw once, use in many places). I could also position icons on the page by shifting the symbols using x and y coordinates and add hyperlinks to pages in WebHelp files. So, SVG could prove adaptable in an agile software engineering environment where last-minute changes to visual documentation are needed ‘on the fly’ – a technical communicator doesn’t need to restart from original illustrations to make simple changes.

Create visual documents with SVG – Part 7: Functionality across browsers

Various desktop and mobile browsers have implemented the functions build into SVG – basic graphic display, filter effects, interactions with HTML and animation – in different ways (http://caniuse.com/#cats=SVG). 
Graphics can therefore look different in different browsers. I have compared current versions of Google Chrome and Firefox in particular.
In one instance, a logo (exported from Adobe Illustrator) had lines that appeared disjointed in Firefox but displayed correctly in Chrome. In Firefox, when you click on a graphic to open a browser window using JavaScript, the size of the new window increases depending on how far you have zoomed in to the graphic (this doesn’t affect Chrome). When displaying different translations of text in SVG, you select the language using browser settings; Firefox switches easily between languages (that is, it displays web pages in another language) but for Chrome you currently need to change the language of the whole browser interface (not just the content displayed in a page). Firefox doesn’t have good support for fonts in SVG – text displays in standard web fonts rather than a font you have defined; Chrome doesn’t have this limitation, and even right-to-left character sets display well.
Given these varying results, I have realised the need to standardise SVG behaviour across browsers, and experiment with both SVG coding and JavaScript functions to improve cross-browser rendering. The aim is to work around browser bugs and limitations in the support for some SVG features.

Create visual documents with SVG – Part 6: Web standards and accessibility

Like any web technology, SVG must comply with web accessibility requirements (the Web Content Accessibility Guidelines 2.0). The most basic requirement is to add alternate text to graphic elements using the ‘xlink:title’ attribute. This is especially important for any hyperlinked graphics so that users can get (in the form of pop-up tooltips or with assistive technologies such as screen readers) a description of available features.
The W3C recommendations for SVG accessibility (see Accessibility features of SVG http://www.w3.org/TR/SVG-access) notes that key considerations are using CSS styles, descriptions for linked SVG files in HTML, and markup that modifies content according to a user’s browser settings (such as browser-specific translations of text).

Post has attachment
Create visual documents with SVG – Part 5: Information design

Sometimes a document’s content has a natural structure that can be depicted diagrammatically – such as when we use a flowchart to depict how to follow the steps of a procedure. While documents often include diagrams of this kind alongside the text to help readers understand the structure, using hyperlinked graphics can provide orientation and guide a reader through options. Users can similarly hide and display graphics or pop up additional information by clicking on a hyperlink.
The end result is that documentation is more inviting to use and that the information is easier to access. For example, Figure 1 is part of a user documentation interface that uses arrows to guide users through a setup process. It is more engaging than written steps and a user can click on the graphic at each stage of the process for more information about individual tasks.

Looking at the bigger picture, using hyperlinked SVG illustrations as a ‘front-end’ interface has potential to restructure documentation. An example of this is when information design, or visualising information, is brought into the process of preparing documentation. The conventional view of using topic-based authoring to document tasks is still relevant, it is just that SVG can provide an overall entry point into disparate topics, potentially acting as a topic map. It is unusual to think of documentation in terms of being a user interface. However, when graphics are designed to replace rather than supplement text, there are obvious parallels with designing software interfaces and the usability testing that goes along with that.
Figure 2 shows an application of this visualisation – it is part of an ebook typesetting package where linked SVG graphics open browser windows for contextual help. The software in this case is a bundle of stylesheets to help users create ebooks from XML markup. The end product of using the stylesheets is a book, so the interface was designed to look like a book. Typical users of the stylesheets would already be familiar with the end product they are aiming to create, so why not have a familiar-looking environment (that is, what the end product should look like) instead of just trying to design text in the most informative and accessible way?
The interface comprises several SVG files that look like pages; there are hyperlinked icons for navigation between those pages; and various features that represent styles for each part of a book are put inside the pages. A hyperlinked graphic simply opens a new browser window that contains further reference material about that particular feature as shown in Figure 2.
User experience
Visualising documentation with SVG introduces new ways to improve the user experience (UX). It is also possible to design documentation with SVG as the entry point to conventional online help, so that users can rapidly find concepts and tasks. The example shown in Figure 1 has its interface structured like a book. It has the look and feel of the end product because a user can navigate through SVG graphics (pages) by tapping on icons, from the front cover right through to the index. The application interfaces shown in Figure 1, for example, allow various ‘cognitive affordances’ to be introduced into the interaction. These include:
• providing the overall context of system design (software components with arrows between them to indicate procedures)
• decomposing user tasks into smaller pieces (starting from an overall representation of software components and breaking this down into different SVG pages), and 
• providing choices for decision-making (such as diagrams to help users choose different styles for typesetting)
Photo
Photo
2014-10-11
2 Photos - View album

Create visual documents with SVG – Part 4: Translation

Single-source publishing of documents – using one text source to generate multiple formats for print and web documents – is becoming commonplace. SVG offers something similar: the potential to ‘single-source’ graphics for a number of different languages, so that a graphic displays its captions and labels in the language that is set in the browser preferences.
In this case, the source file is the SVG markup for the graphic. This is prepared so that browsers can recognise a switch is required between different languages. The file contains a number of alternative text fields to hold the different language versions for each caption and labels. A translator can type caption text directly into the SVG file, in the fields appropriate to a particular target language. (An SVG file can include ‘hidden’ comments that tell a translator where to type the text.)
When the completed file is displayed in a browser, the browser determines which language to use by examining the language settings in the browser preferences. To see how the graphic looks to a viewer from a different language group, simply change the language setting.

Create visual documents with SVG – Part 4: Translation

Single-source publishing of documents – using one text source to generate multiple formats for print and web documents – is becoming commonplace. SVG offers something similar: the potential to ‘single-source’ graphics for a number of different languages, so that a graphic displays its captions and labels in the language that is set in the browser preferences.
In this case, the source file is the SVG markup for the graphic. This is prepared so that browsers can recognise a switch is required between different languages. The file contains a number of alternative text fields to hold the different language versions for each caption and labels. A translator can type caption text directly into the SVG file, in the fields appropriate to a particular target language. (An SVG file can include ‘hidden’ comments that tell a translator where to type the text.)
When the completed file is displayed in a browser, the browser determines which language to use by examining the language settings in the browser preferences. To see how the graphic looks to a viewer from a different language group, simply change the language setting.

Create visual documents with SVG – Part 3: Producing SVG

Anyone with technical illustration software can export lines and shapes (e.g. rectangles, circles) as SVG. Typical commercial software such as Adobe Illustrator CC or CorelDRAW will export the format – even technical authoring packages such as Microsoft Visio can produce SVG as one of the output formats. There are a few variations of SVG – some are ‘compact’ formats such as SVG Tiny (http://www.w3.org/standards/techs/svgmobile#w3c_all), designed for use on early mobile devices – but SVG 1.1 is the current full standard. In that form, it is still a vector graphics format that you can simply view – that is, until you edit the markup to add hyperlinking and mouse actions such as ‘hover’. 
Besides creating this format with graphic design and technical illustration packages (such as computer-aided drafting software), you can also use specialised SVG editing software. These present both a visual (WYSIWYG) view of graphics, and a textual view of the markup behind all the lines and shapes. A few open-source packages are prominent, such as SVG-edit (http://code.google.com/p/svg-edit/) and Inkscape (http://www.inkscape.org), which demonstrate ongoing development to ensure that the format has a consistent look and behaviour across as many browsers as possible. Web browsers also come bundled with web developer tools to edit the markup (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Tools_for_SVG).

Post has attachment
Create visual documents with SVG – Part 2: What’s so good about SVG?

At first it sounds like just another graphics format. We are already using image formats for graphics such as screenshots, so why use yet another format? 
Well, because SVG is a vector format designed for the web.
On its own, SVG is a high-quality format for illustrations, charts and maps (http://www.netmagazine.com/features/20-svg-uses-will-make-your-jaw-drop). In that respect, it has a similar appearance to encapsulated postscript (EPS) or computer graphics metafile (CGM) formats for print documents. You can draw lines and shapes, add text, apply colour fills and gradients, and embed images.
As SVG is built into HTML5, these basic features are only the start of its capabilities. Because an SVG file contains text written in a markup language, you can edit it with a text editor and display it in an HTML5-compatible browser. The lines and shapes that make up an SVG graphic are represented as ‘tagged elements’ in the markup, just like the paragraphs that make up an HTML document. The coding below shows a simple example of SVG markup inside an HTML file. The arrow below it is what you’ll see if you view this markup in a browser.

Figure 1. An example of SVG markup.

Figure 2. How the SVG markup in Figure 1 looks in a browser.

This arrow is made up of a line and two polygons (one for each arrowhead). The markup beginning with <line and ending with the closing tag /> represents the line. The arrowheads are specified by the text starting with <polygon and ending with />. The markup that begins points= gives the coordinates of the arrowhead vertices.
In HTML you can make a complete diagram on a web page into a hyperlink, but with an SVG diagram you can make any individual element of that diagram into a hyperlink by enclosing it in suitable tags (<a href= “”> and </a>). In the above example, the markup representing the arrow is enclosed inside a hyperlink tag that sets the target of the hyperlink to a web page (it could easily be another graphic or another part of the document). Clicking anywhere on the arrow would then take you to the target: www.xmplar.biz in this example. 
The ability to use hyperlinks is particularly relevant for technical documentation. You can also style the elements of an SVG graphic by using cascading style sheet (CSS) styles. One benefit is that the CSS ‘hover’ attribute gives users visual feedback when hovering the mouse pointer over part of the graphic – such as changing the colour of that part of the graphic. This effect is commonly used to indicate that a graphic element is a hyperlink or launches a ‘pop-up’ window.
Photo
Photo
2014-10-03
2 Photos - View album
Wait while more posts are being loaded