Diagram Remix
Mini Challenge Summary
Summary: Construct a diagram with reusable scalable vector graphics (SVG) images Time: 1.5 to 2 hours. The static image is the first modality of this learning pathway on creating media.
Stimulus Resources
- Types of diagrams: see General Diagram Types
- Scalable Vector Graphics (SVG) article
- 10 Tips for Creating Good Looking Diagrams Using Inkscape.
Examples of SVG images from the Wikimedia Commons. Click on the image for metadata and download the link.
![Camara de fotos.svg](../../../wikieducator.org/images/thumb/6/61/Camara_de_fotos.svg/120px-Camara_de_fotos.svg.png)
![Bicycle diagram-en.svg](../../../wikieducator.org/images/thumb/8/8a/Bicycle_diagram-en.svg/120px-Bicycle_diagram-en.svg.png)
![Scheme ant worker anatomy-en.svg](../../../wikieducator.org/images/thumb/8/8d/Scheme_ant_worker_anatomy-en.svg/120px-Scheme_ant_worker_anatomy-en.svg.png)
![Location Namibia AU Africa.svg](../../../wikieducator.org/images/thumb/6/67/Location_Namibia_AU_Africa.svg/120px-Location_Namibia_AU_Africa.svg.png)
![Political chart.svg](../../../wikieducator.org/images/thumb/9/9c/Political_chart.svg/110px-Political_chart.svg.png)
![Venn diagram coloured.svg](../../../wikieducator.org/images/thumb/0/05/Venn_diagram_coloured.svg/120px-Venn_diagram_coloured.svg.png)
![Chart organisation.svg](../../../wikieducator.org/images/thumb/d/d8/Chart_organisation.svg/120px-Chart_organisation.svg.png)
![Human-gnome-session-switch.svg](../../../wikieducator.org/images/thumb/1/12/Human-gnome-session-switch.svg/120px-Human-gnome-session-switch.svg.png)
![Human-dialog-info.svg](../../../wikieducator.org/images/thumb/d/de/Human-dialog-info.svg/120px-Human-dialog-info.svg.png)
![Crystal Clear app kedit.svg](../../../wikieducator.org/images/thumb/e/e8/Crystal_Clear_app_kedit.svg/120px-Crystal_Clear_app_kedit.svg.png)
![Green box.svg](../../../wikieducator.org/images/thumb/5/57/Green_box.svg/120px-Green_box.svg.png)
![Ear internal anatomy.svg](../../../wikieducator.org/images/thumb/8/89/Ear_internal_anatomy.svg/120px-Ear_internal_anatomy.svg.png)
![Vulcanian Eruption-numbers.svg](../../../wikieducator.org/images/thumb/d/dc/Vulcanian_Eruption-numbers.svg/120px-Vulcanian_Eruption-numbers.svg.png)
![Flowchart connector example no text.svg](../../../wikieducator.org/images/thumb/e/e7/Flowchart_connector_example_no_text.svg/76px-Flowchart_connector_example_no_text.svg.png)
![Flag of New Zealand (3-2 aspect ratio).svg](../../../wikieducator.org/images/thumb/d/d8/Flag_of_New_Zealand_(3-2_aspect_ratio).svg/120px-Flag_of_New_Zealand_(3-2_aspect_ratio).svg.png)
![Female shadow anatomy.svg](../../../wikieducator.org/images/thumb/1/10/Female_shadow_anatomy.svg/66px-Female_shadow_anatomy.svg.png)
![Periodic table large.svg](../../../wikieducator.org/images/thumb/4/4d/Periodic_table_large.svg/120px-Periodic_table_large.svg.png)
![CPT-Classification of Software - relationships.svg](../../../wikieducator.org/images/thumb/5/5d/CPT-Classification_of_Software_-_relationships.svg/107px-CPT-Classification_of_Software_-_relationships.svg.png)
Purpose
This challenge will help you generate a graphic, diagram, or chart for reuse in a presentation using the scalable vector graphics (SVG) file format.
This exercise will help you:
- Create editable images using an open file format, which will allow you to reuse the material, such as to translate diagram labels;
- Remix and reuse existing OER image assets;
- Use the SVG file format, which allows you to resize images without losing image quality.
Tasks
- Visit the Inkscape homepage, and download and install the official release package for your operating system.
- We recommend using an official release package.
- Make sure you download the version for the operating system on your computer, i.e. Windows, Mac, or Linux.
- If you are not sure how to install software, search “How to Install Inkscape.”
- If you prefer to use slideshow software, try using LibreOffice Impress, which is part of the LibreOffice suite. You can download and install the latest stable version according to the operating system on your computer. LibreOffice supports the import and export of SVG files (see here).
- Other software options:
- Gravit Designer is a free, proprietary, vector-based authoring solution where you can work online or download local versions of the software.
- Feel free to use any software package that allows you to import and export of open SVG file formats.
- Launch Inkscape, Gravit Designer or your preferred tool and explore the software.
- If you are new to using graphics software, search YouTube for Inkscape tutorials. You will find extensive resources, such as the Derek Banas introduction to Inkscape tools, or the playlist for Inkscape tutorials for beginners from Davina and Caroline.
- While we do not expect you to become an intermediate or advanced user of graphics software, basic skills include the ability to add text, squares, and rectangles; change colors; and import/export SVG graphics.
- Conceptualize a chart, diagram, or graphic to include in the diagram you are creating.
- Revisit the stimulus resources above to generate ideas.
- Draft a freehand version of your concept for your diagram on paper.
- Search for SVG graphics you want to copy, reuse, and remix to include in your diagram. You can:
- Search Wikimedia Commons, and include the string “SVG” in your search. The category SVG icons is a good starting point.
- Search openclipart.org, a large collection of clipart you can download in SVG format.
- Search the internet for openly licensed SVG images.
- Record the URLs of the pages for the SVG graphics you wish to download, the names of the authors. and the type of license types for the images. You will need this information to give attribution for your derivative work.
- See the attribution of the SVG icons for this graphic which illustrates the structure of an OERu course. Note that this is a SVG graphic you can download, modify, and reuse.
- Download and save the SVG graphics you want to reuse and incorporate in your diagram.
- Remember to record the URL and relevant metadata for attribution in your derivative work.
- Please share your process with our community by posting on the course forums.
Outputs
- Create a graphic, diagram or chart for use in a presentation using Inkscape (or alternative software) which supports SVG graphics. Your graphic must:
- Incorporate at least two openly-licensed SVG files, which you have downloaded and imported into your graphic for remix. You are free to change colors and remove elements from the source graphic(s). For attribution purposes remember to keep information on the metadata and source URLs of the images you reused.
- Prepare a blog post (150–200 words) where you:
- Upload the image to your blog with proper attribution of the source SVG files you used.
- Share a brief reflection of your experiences designing and publishing the graphic.
Last modified: Thursday, February 7, 2019, 11:06 AM