Inkscape

References

• Inkscape Beginner's Guide
• Inkscape Tutorials

Introduction

The Inkscape Scalable Vector Graphics (SVG) image editor is an open-source project which provides us with a professional-grade, full-featured image editor, FREE.

This class will introduce you to some of the basic features of Inkscape. Keep in mind that Inkscape has a lot more to offer than what we will cover here.

Scalable Vector Graphics (SVG) images are a great choice in the Responsive Web Design (RWD) world. SVG images look sharp and clear on any display device, from large monitors to small phones.

But keep in mind that some images are NOT suitable for the SVG format. In particular, photographs of real-world objects will be best in the JPG format, not SVG.

Images that are suitable for the SVG format have sharp edges, lettering, geometric shapes (which can, though, be very complicated), sharp curves, etc.

Please NOTE: Some Web servers and/or browsers may limit your ability to view SVG images. In particular, Chrome has had major issues with blocking SVG images. The examples in this eHandout will work in Chrome, but this is mainly because I am using an <object> tag to display the SVG images in this handout. We will talk about the <object> tag later in this class.

Also please NOTE: Many mobile browsers may limit your ability to view SVG images. It appears that none of Firefox, Chrome, and Safari mobile browsers will display SVG images, at least as of the Spring of 2020.

Here is an example of an SVG image in a RWD page. Please note that there is nothing special about this image; it is a very simple, standard SVG image.

Now here is a similar image in PNG format in a RWD page. Move the right border of the window in and out to see how grainy the image looks at large sizes, especially on the curves and the lettering.

Installation

The first thing to do, of course, is to install Inkscape on your computer. Even the computers in the Lab and the classrooms here do not normally have Inkscape installed on them. No problem.

The installation programs are available for Windows computers, Mac computers, and UNIX-based computers. The main installation download page is here: https://inkscape.org

Click the "DOWNLOAD" menu item at the top of the home page, and then click the "Current Version" sub-menu.

Now click the "All Platforms" button at the right.

Click on the "Download" link for your computer.

The download should now start.

Execute/run the downloaded file to install the Inkscape app.

The first time you run Inkscape, it will take a few moments to find its tools and filters. Be patient as it starts up.

Editing Techniques

Now let's do some basic image editing. We will create our own image, but these techniques will be useful for editing an existing image, too.

• Start the Inkscape app.
  
  
• Press <Ctrl>+N, or click "File", "New" to start a new image.
  
  
• Here are some General Features and Hints about Inkscape:
  • There is a "Zoom" spinner tool in the lower right corner of the app. Use this tool to make smaller objects appear larger, and easier to work with.
  • If you need to change the actual size of the image-drawing area, you can use the "Transform" panel (Shift+Ctrl+M). Please note that the default dimensions are millimeters, not pixels.
  • The "Selection" tool is the "Arrow" icon at the top of the left toolbar. You can use the "S" key to active this "Selection" tool.
  
  
• Follow these steps to use some of Inkscape's basic tools:
  
  
  1. Let's put a simple line into the image:
     
     
     • In the left toolbar, click the "pencil" icon, or press the F6 key. (This tool is about halfway down the left toolbar.)
     • Click once inside the image.
     • Move the cursor to another location in the image and click a second time. You should now have a straight line in the image.
     • You can, if you wish, adjust the properties of the line by following these, or similar, steps:
       1. If you have changed the focus to something else besides the line, use the "Select and transform objects (F1)" main tool to click on the line to re-select it. This tool is the "Arrow pointer" at the very top of the main, left toolbar.
       2. Click the "Fill and Stroke" panel header in the right panel section. (Or press <Shift> + <Ctrl> + F.)
       3. Adjust the Fill, Stroke paint, and Stroke style properties by clicking those tabs at the top of the "Fill and Stroke" panel.
          • The X "Fill" icon removes the fill entirely.
          • A border may be added by defining the color with the Stroke paint tool, and the width of the border may be adjusted with the Stroke style tool.
     • You can move the object around in the image by selecting it and "grabbing" it with your mouse cursor. When the object is selected, you can also use the Arrow Keys on your keyboard to move it around.
     
     
  2. Now let's SAVE the image:
     
     
     • Click "File", "Save As..." or press <Shift> + <Ctrl> + S.
     • Choose a folder to save the image into, and name it something like "classSample.svg" Make a note of where you saved the image, because next we are going to display the image in a browser.
     
     
  3. Display the image in a browser:
     
     
     • Locate the file that you just saved, in a File Manager. (in Windows, you can press <Window> + E to open the Windows Explorer app.)
     • You can probably double-click the image's filename to open it in the default browser. Or you can right-click on the image file and click "Open with" to choose another browser.
     • Since the image is not yet in a Responsive Web Design (RWD) page, it will not resize when you move the window border back and forth. But you can "zoom" the image in the brower to see how it responds to being resized. Note, particularly, that the line's edges remain sharp.
     • Alternatively, you could download this container page in which to display your SVG image. (You can right-click the page if it displays in the browser, and "View source" to get the HTML code.) This container is a RWD page and may be resized to demonstrate how SVG images scale very well. This framework page is currently set up to display image images/classWork.svg, so if your image is named something else or it is in a different directory, change the src attribute.
     
     
  4. Now let's put a rectangle into the image:
     
     
     • First, add another layer to the image. Inkscape, just like most other image editors, stores its objects in layers.
       Use <Shift> + <Ctrl> + <L> to open the "Layers" panel.
       Layers can be shuffed from back to front, and vice-versa, and can even be "turned off" so they are not visible. You have a lot of control over which layers become part of your finished image.
       1. Click the "Layer", "Add Layer..." main menu item; or press <Shift> + <Ctrl> + <N>.
       2. Change the name of the new layer, if you wish.
       3. After you click "Add" to add the new layer, make sure the "Layers" tab is open on the right. If it is not, go to the main Inkscape menu and click "Layer", "Layers...".
     • Make sure that the new layer is the "active" layer. It probably is, since you just added it, but it doesn't hurt to make sure. Click the "Layers (Shift+Ctrl+L)" tab in the right toolspace. Click on the name of the layer that you want to make "active".
     • You can hide the layer in the finished image by clicking the "eyeball" next to its name in the "Layers" list. Of course you can include the layer in the finished image by clicking the "eyeball" again.
     • Now for the rectangle: In the left toolbar, click the "rectangles and squares" icon, or press the F4 key.
     • Click once inside the image and DRAG (while holding down the left mouse button) to another location in the image, creating a rectangle.
     • Release the mouse button to place the rectangle into the layer.
     • Adjust the properties of the rectangle by following these, or similar, steps:
       1. Click the "Fill and Stroke" panel header in the right vertical toolbar. (Or press <Shift> + <Ctrl> + F.)
       2. Adjust the Fill, Stroke paint, and Stroke style properties.
          • The X "Fill" icon removes the fill entirely.
          • A border may be added by defining the color with the Stroke paint tool, and the width of the border may be adjusted with the Stroke style tool.
     • Save the image.
     • View the image in your browser.
     
     
  5. Now add an ellipse to the image:
     
     
     • First, add another layer to the image.
     • In the left toolbar, click the "circles, ellipses, and arcs" icon, or press the F5 key.
     • Click once inside the image and DRAG (while holding down the left mouse button) to another location in the image, creating an ellipse. If you drag more or less at a 45° angle, Inkscape will attempt to make the ellipse into a circle.
     • Adjust the properties of the rectangle by following these, or similar, steps:
       1. Click the "Fill and Stroke" panel header in the right vertical toolbar. (Or press <Shift> + <Ctrl> + F.)
       2. Adjust the Fill, Stroke paint, and Stroke style properties.
          • The X "Fill" icon removes the fill entirely.
          • A border may be added by defining the color with the Stroke paint tool, and the width of the border may be adjusted with the Stroke style tool.
     • Save the image.
     • View the image in your browser.
     
     
  6. Now add some text to the image:
     
     
     • First, add another layer to the image.
     • In the left toolbar, click the text objects icon, or press the F8 key.
     • Click once in the image. (Note: If you click and drag, instead of clicking once, you will create "flowed text", which is not supported in many browsers. You can convert flowed text to normal text with the "Text", "Convert to Text" menu item.)
     • Type some text.
     • You can adjust the text size, font, and style with the "Text and Font (Shift+Ctrl+T)" tab in the right tool area.
     • If you change any of the text properties, you will probably need to click the "Apply" button at the bottom of the tab's pane.
     • Save the image.
     • View the image in your browser.
     
     

Making a Custom Fill Object (Pattern)

If you need a "fill" pattern other than a solid color, you can make a Pattern object.

• First, add another layer to the image.
• You can even work on your pattern (see the following steps) in a part of the Inkscape desktop which is outside of the main image.
• Make your pattern. Use whatever objects (lines, rectangles, ellipses, etc.) that you need.
  • HINT: If you use the "Create stars and polygons" tool, you can adjust the number of points/corners with the "Change" ribbon at the top of the app.
  • If the "Change" ribbon isn't visible, click the object with the "Select and transform" tool active, then click the "Create stars and polygons" tool. The ribbon should show up.
• Select all of the objects that you want to include in the pattern. You can drag a rectangle around the objects with the "Select" tool to select all of the enclosed objects; or you can click, press <Shift> and click again, and repeat, to click and select the objects that you want in the pattern.
• Click the "Object", "Pattern", "Object to Pattern" menu item. The objects will be combined into a new object which is a pattern.
• Now you can create a new object or select an existing one, click the "Fill and Stroke" tab in the right tool area, and in the "Fill" tab select the Pattern Fill object that you just created. The "pattern" icon is the small "diamond" (slanted checkboard) icon. (And note that Inkscape also provides a nice selection of stock patterns.)

Considerations

SVG images are stored in plain text files, as XML code. You can view the text by opening the image in a standard text editor.

You can even change the image in the text editor, but you need to be really careful. It is quite easy to introduce mistakes and to make the image unusable.

If you would like to see what the XML code looks like, do this:

1. Close Inkscape.
2. Find the image that you have been working on, in Windows Explorer.
3. Right-click the image name and pick "Edit with Notepad++", or "Open with" some other TEXT editor.

SVG in Chrome and Mobile Browsers

SVG images (as recently as Spring 2020) can sometimes refuse to display in the mobile Chrome browser, and in most mobile browsers.

I have done a lot of research into this problem and I think I have found a solution.

The Object Tag

In reality, there appear to be two possible solutions. I will present both of them here, and you can choose the solution that works in your site. Please note that the crucial part of both solutions is to use an <object> tag instead of an <img> tag for the SVG image.

Also, please note that the title attribute appears NOT to generate a tooltip for the object tag. You can add a very thick border to the object tag, and the border will display the title attribute's text, but this is not a recommended solution.

First Solution

The first solution is the simpler of the two, so I will present it first:

1. Use an <object> tag, not an <img> tag. Apparently the main advantage of using an <object> tag is that you can tell the browser what kind of file it is preparing to display, whereas, with an <img> tag you cannot give the browser this information. The type attribute in the <object> tag gives the browser this information.
   
   Here is an example of an appropriate <object> tag:

   <object id="SVG_Object" type="image/svg+xml" data="images/ATUTuningImpedance.svg"></object>

   Please NOTE that the type attribute in the <object> tag is very specific and must be exactly like it is shown above. In particular, make sure you have "image/svg+xml" and NOT "images/svg+xml". In other words, this is NOT the name of your images folder!
   
   
2. If you are using the w3.css stylesheet for RWD in your site, you may put classes such as w3-container and w3-third (etc.) into the <object> tag.
   
   
3. Open the SVG image file in your favorite text/HTML editor.
   
   Change the width and height attributes in the <svg> tag to "100%" for each attribute.
   
   If you want to control the width more specifically, you may wrap the <object> tag in a <div> tag, to which you apply any relevant CSS properties, e.g., width: 100%. You may also apply a CSS width to the <object> tag, e.g., width: 60%.

Second Solution

The second solution is a bit more complicated, and appears to be unnecessary in most sites. But here it is, just in case the first solution isn't working for your site:

1. Use an <object> tag, not an <img> tag. Apparently the main advantage of using an <object> tag is that you can tell the browser what kind of file it is preparing to display, whereas, with an <img> tag you cannot give the browser this information. The type attribute in the <object> tag gives the browser this information.
   
   Here is an example of an appropriate <object> tag:

   <object id="SVG_Object" type="image/svg+xml" data="images/ATUTuningImpedance.svg"></object>

   
   
2. Put the <object> tag into a container such as a <div> tag which has an id attribute in it.
   
   
3. If you are using the w3.css stylesheet for RWD in your site, you may put classes such as w3-container and w3-third (etc.) into the <div> tag.
   
   
4. Open the SVG image file in your favorite text/HTML editor.
   
   
   1. WRITE DOWN THE CURRENT width AND height ATTRIBUTE VALUES THAT ARE IN THE <svg> TAG. You will need them to calculate "NN%", below.
   2. Change the width and height attributes in the <svg> tag to "100%" for each attribute.
   
   
5. In your CSS stylesheet, make these adjustments and/or additions:
   
   
   1. The id selector for the <div> tag which contains the <object> tag needs to include at least these properties:
      • height: 0;
      • position: relative;
      • padding-bottom: NN%; (NN is the aspect ratio of the SVG image. You can calculate this percentage by dividing the image's ORIGINAL width by the image's ORIGINAL height, and multiply by 100.)
      • width: MM%; (MM is an appropriate width for the <div> in the page, e.g.: 90%)
      
      
   2. The id selector for the <object> tag needs to include at least these properties:
      • width: 100%;
      • height: 100%;
      • position: absolute;
      • left: 0;
      • top: 0;

Now I want to give credit to the person who wrote the article that I found which gave me this approach to displaying SVG images. Here is the main article:

• SVG images in Responsive Web Pages: Look for the section "Intrinsic ratio container trick".