: How to add a stroke property or animate the fill path of an svg? I've been using a combination of Illustrator, Sketch, Inkscape, and Peter Collingridge's svg-editor to create and manipulate SVG's,
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:
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.
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.
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.
More posts by @Steve758
1 Comments
Sorted by latest first Latest Oldest Best
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.
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.
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).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.