3

I've been using a combination of Illustrator, Sketch, Inkscape, and Peter Collingridge's svg-editor to create and manipulate SVG's, but I've been running into a few issues. I am trying to create a basic logo using text, and when the logo appears on the page I would like to animate the outside border (with a drawing effect), and then fill the centers with a solid color.

In Illustrator and Sketch, I started with a basic text box and converted the layer to outlines, but my exported SVG's only contain a single path without the stroke and stroke-width fields. It just looks something like this: <path fill="#FFF" d="…"/>, with alot of markup in the d='' field.

I read up and learned Inkscape exports some of the cleanest SVG's, so imported a PNG of my initials, "traced a bitmap image" and the "ungrouped the layers" per this demo: youtube.com/watch?v=1cZk08x_rAI. This exported a multi-path svg, but each still lacked the stroke and stroke-width params. This is the closest I've come so far to animating it: codepen.io/pcooney10/pen/PPvGrx, and it also contains the actual SVG code.

I have a few questions, hopefully some people over here can help:

  1. How can I create/export SVG's that contain stroke, stroke-width, stroke-dasharray, and stroke-dashoffset fields? These params seem to unlock a lot of animation functionality.

  2. How can I create a flattened SVG that still animate the outer borders? It seems that paths need to be closed shapes, so that's helping me make some sense out of why my svg is 7 layers. All the extra colors seem unnecessary, but if I hide a layer it looks funny.

  3. Generally, what's the best tool for creating SVG's? It seems Inkscape exports the cleanest SVG code, but it's not as easy to maneuver as Sketch and Illustrator. Peter Collingridge's svg-editor seems to be the best for slimming down the code, but it doesn't remove all of the styling that Sketch and Illustrator embed in the file.

Improve this question
2
  • 1. You might want to set a stroke on your shape before exporting it. eg width 1px, color red. For vector shapes you always have the option to set stroke and fill color separately. 3. You can use inkscape export as a final step and design your shape in any other tool. My personal favorite at the moment is Affinity Designer for the export because of the additional options it offers, like flattening transforms. There is also a command line tool for optimization called svgo (github.com/svg/svgo).
    – AAGD
    Nov 25, 2015 at 11:55
  • @AAGD thank you. After posting this question I figured out how to add the stroke property in Illustrator. I have a feeling that all paths can have a stroke element - even if not defined in the original file. For shapes that I didnt really want to have an outline but wanted the outline effect I added 0.1px to the stroke width and was able to get the drawing animation to work
    – 0xPingo
    Nov 27, 2015 at 1:07

1 Answer 1

Reset to default
3
  1. How can I create/export SVG's that contain stroke, stroke-width, stroke-dasharray, and stroke-dashoffset fields?

With Inkscape this is really easy:

Create

  • stroke: Draw or import your object, select the object, then simply pick a color from the palette while holding Shift or set the stroke directly in the "Fill and Stroke" menu (Shift+Ctrl+F). The default stroke width will be 1px.

  • stroke-width: Adjust the stroke width to your liking in the "Fill and Stroke" menu.

  • stroke-dasharray: Choose a pattern that you like from the "Dashes" dropdown or create your own pattern by choosing "Custom".

  • stroke-dashoffset: Adjust the number next to the dropdown to your liking. You will see the dashes wander around the shape.

Export

  • Hit "File" > "Save" and choose "Plain SVG" as the format. The resulting file will be a clean SVG representation with the properties you were looking for.

Example

Saving these three shapes

as a plain SVG gives you:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg197572"
   viewBox="0 0 840.00001 280"
   height="280"
   width="840">
  <defs
     id="defs197574" />
  <metadata
     id="metadata197577">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(87.913618,-29.053558)"
     id="layer1">
    <g
       transform="translate(-5.1968614,1.7322813)"
       id="g198176">
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:15.99999952, 7.99999977;stroke-dashoffset:24;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198120"
         d="m 660.77938,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25102,7.68065 -48.74777,-30.52798 -67.21871,-34.4541 -18.47094,-3.92612 -62.7855,18.16832 -75.42109,4.13508 -12.63559,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97388,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11546,-51.602873 58.5864,-47.676754 18.47094,3.92612 21.49388,53.350874 34.12947,67.384124 12.63558,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
      <path
         d="m 397.92226,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25101,7.68065 -48.74777,-30.52798 -67.2187,-34.4541 -18.47094,-3.92612 -62.78551,18.16832 -75.4211,4.13508 -12.63558,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97387,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11547,-51.602873 58.58641,-47.676754 18.47093,3.92612 21.49387,53.350874 34.12946,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z"
         id="path198124"
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:16, 8;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198126"
         d="m 135.06512,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.251014,7.68065 -48.747765,-30.52798 -67.218704,-34.4541 -18.470939,-3.92612 -62.785503,18.16832 -75.421091,4.13508 -12.635588,-14.03325 13.969949,-55.79555 11.996077,-74.5757 -1.973873,-18.78014 -36.680888,-54.09824 -27.239093,-70.45191 9.441795,-16.353669 57.381673,-3.95556 74.632691,-11.63621 17.251019,-7.680648 40.115467,-51.602873 58.586406,-47.676754 18.470944,3.92612 21.493874,53.350874 34.129464,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97388,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
    </g>
  </g>
</svg>

Check the three <path ... /> elements to see the stroke and dash properties.

  1. How can I create a flattened SVG that still animate the outer borders?

I think you're mixing several concepts here: If by "flattened" you mean "no layers" you would have to move all objects into one layer. This is completely independent of whether certain shapes are closed paths or not. You seem to have run "Trace Bitmap", which (depending on the settings/filter) gives you several objects that may seem like different "layers" but are in fact just individual objects containing (possibly noisy) shape geometry, all of them in a single layer.

So, to clear things up:

  • In SVG, layers are distinct overlapping "canvases" whose visibility can be toggled individually. To see layers in Inkscape, hit Shift+Ctrl+L. For a simple SVG that you want to use on the web, I would only use a single layer and put all objects in there. Most likely you will only have one layer called "Layer 1". That's fine.

  • When you run "Trace Bitmap" (e.g. with "Multiple Scans: Colors") you end up with a group of objects. You can ungroup this with Shift+Ctrl+G, then separate (move F1) and inspect the individual objects. They will most likely contain the vector traces of differently-colored shapes. To edit these objects you need to enter "Edit paths by nodes" (F2), then you may e.g. select (draw a selection rectangle) and delete noisy nodes (Ctrl+Del). If you feel like there is just a lot of noise or that the objects provide a very bad separation of the original, you may want to re-run "Trace Bitmap" with different settings or simply draw the vector shapes manually.

  • You can join any objects that are paths (like the results from "Trace Bitmap") into a single object by selecting both of them and choosing "Path" > "Union" (or any other Boolean operation, for that matter). If one of the objects is not a path convert it with "Path" > "Object to path". If that doesn't work, you might be dealing with a group of paths, which you need to ungroup first and then convert individually. Note: An object can only have one fill and one stroke color. So when you join two objects, they will assume the colors of either the first or the second object.

  • No matter wether you obtain your vector shapes from tracing or manual drawing, in the end you want to have a few clean objects with closed paths. Then you can assign stroke, stroke-width, stroke-dasharray and stroke-dashoffset. It's ok if some paths are open, but note that the fill will look funny as it "cuts across" from one end point of the shape to the other, so you should remove the fill for these paths.

With such a cleaned-up shape you should be able to easily animate the desired properties.

  1. Generally, what's the best tool for creating SVG's?
  • Haha, it's impossible to give an objective answer to that question. I have used both Illustrator (a while ago) and Inkscape (exclusively for the past couple years). In my personal opinion, Inkscape is definitely not intuitive to learn if you're coming from Illustrator. However, it's also not horribly complicated to learn. Once you have mastered it, it's absolutely amazing and definitely the best tool for creating SVGs. It was built around SVG, meaning there is a 1:1 correspondence between the Inkscape tools and the SVG features. And it is free and open source, which - if a software is mature enough, like Inkscape - always scores bonus points with me. But like I said - personal opinion :D.

I hope that more or less answers your question(s).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.