I a recent discussion on Linkedin on the creation of hatchings, I was wondering about a way to improve the creation of Dash Arrays in Inkscape. Currently this very powerful method of creating hatchings is largely unused because one has to edit the XML either through the XML editor or the Dash Array definitions file. How difficult would it be to create an on screen tool using largely the same method as gradients to create Dash Arrays.

Method:
You'd draw a line and select the dash array tool that gives you the option to create arbitrary stops along the path to define the length of the array and the amount of stops along the array, either by just dragging a begin node and an end node along the length of the line or by adding a stop through a menu that allows to add a stop with a certain length. By increasing or decreasing the length of the end node of the entire array, you could then fine tune the Dash Array' s depiction, enabling the Dash Array spaces and dashes to be wider or narrower. Adding some options for equal distribution of regular offsets or randomly seeded offsets for fast creation of Dash Arrays wouldn't be difficult either. The width should be possible in line width (default) or 100% (for hatching) or anything to your fancy.

This in turn would allow for another tool to be created,.. a Hatch filling tool.
Basically using the Dash Array tool to create one or more Hatch lines in certain angles and then putting them in a clip or mask of equal size with the path the Hatching should be displayed in. This could even be made fancier by creating multiple Dash Array lines with an offset (either regular or randomized by seed), to recreate effects such as found in 17th century engravings (like the bricks in walls), with some displacement filters on top of it as icing on the cake. If we go totally wild on this idea, how about hatching + meshwarp gradients + displacement map to create hatchings following a shape. That would allow for even wilder effects such as found in 17th century shipbuilding hatching. If you've ever seen those and realize those guys used pen and ink, you'll get my drift.

If my abilities as a coder weren't so poor I'd probably proceed implementing this myself, but it does seem like something doable, using only already available methods in SVG.

Going even wilder on this concept would be to convert an image and it's colors to hatchings of equivalent weight in the gray scale or a limited amount of colors, using much the same method as ASCII art. That would eventually allow for converting images to engravings of unlimited precision. With such a tool set, you could start creating banknotes to rock carvings. Moreover, the amount of data transferred would be minimal compared to the output.

Jelle wrote:wondering about a way to improve the creation of Dash Arrays in Inkscape. Currently this very powerful method of creating hatchings is largely unused because one has to edit the XML either through the XML editor or the Dash Array definitions file.

Feature requests already filed to improve handling and managing of dashed line styles:

• Bug #170233 “A window for editing dash arrays”
• Bug #171003 “Grid layout to choose markers or dashes”
• Bug #171996 “stroke dash pattern size control”
• Bug #172164 “Custom dash patterns”
• Bug #512242 “Custom dashed lines impossible without the XML editor”
• … and others related to better GUI options to manage custom (user) resources.

Jelle wrote:How difficult would it be to create an on screen tool using largely the same method as gradients to create Dash Arrays.

Personally, I'm not convinced yet that editing the dash array properties alone requires or warrants a dedicated 'tool' - there might be more subtle ways to implement a better UI than currently available (via XML Editor), which also allows to manage the resources/styles, stock as well as custom, or integrate it in a more generic tool to adjust all (or more) style properties directly on-canvas.

Jelle wrote:Currently this very powerful method of creating hatchings (…)
This in turn would allow for another tool to be created,.. a Hatch filling tool.

You know about the hatching and stitching LPEs? And the engraver's toolbox (Calligraphy tool)?

Maybe you actually want some kind of stippling? Recent thoughts about stippling and SVG can be found via Tavmjong Bah's G+ page: SVG Screen Filter Primitive.

Jelle wrote:Going even wilder on this concept would be to convert an image and it's colors to hatchings of equivalent weight in the gray scale or a limited amount of colors, using much the same method as ASCII art.

Ever played with the 'Trace' and 'Color' options of 'Edit > Clones > Create Tiled Clones…'? (screenshots)

Ehm,.. SUV

The whole point of using Dash Arrays is that you can make a cross hatching with as little as 3 lines of SVG code (2 lines and a dash array), the lines using the same Dash Array. They can easily be animated even, try that with LPE

Using Dash Arrays for hatching can greatly reduce the size of files and imagine using them on the stitch paths (hey so part of the code is already there )

Using interpolated lines you can create a similar effect to what I describe with the hatching and mesh warp plus displacement map, but not with so little code as you could do with the Dash Arrays.

When designing for web, less is more... The Dash Array is a gravely underestimated feature in SVG it seems. Patterns also have the nasty habit of creating artifacts when skewed.

Jelle wrote:The whole point of using Dash Arrays is that you can make a cross hatching with as little as 3 lines of SVG code (2 lines and a dash array), the lines using the same Dash Array.

Could you attach sample SVG files with cross-hatched areas using such dashed paths?

Admittedly, I did not fully understand what the advantage of this briefly described method would be, nor how it would be used to create a densely (cross-)hatched drawing similar to old engravings (while keeping file size and rendering time down to a minimum):

Jelle wrote:Basically using the Dash Array tool to create one or more Hatch lines in certain angles and then putting them in a clip or mask of equal size with the path the Hatching should be displayed in.

Jelle wrote:(…) + meshwarp gradients + (…)

Are you referring to the experimental mesh gradients (on the roadmap for SVG 2.0, not yet finalized (last time I checked))?

Here's an example of the basic code, basically two lines with Dash Array and a clippath.



And yes,.. I was referring to the Mesh Warp for SVG 2.0. Granted, it can take a while before we'd get to display any of it in websites, but Mesh Warps are at a advanced level of development I think. Any Mesh Warp gradients that are created could be converted to bitmaps for backwards compatibility with SVG 1.1, Tiny or whatever. In general things that are too advanced will just not be parsed by browsers. The flowtext in Inkscape, are not standard either, but certainly save me loads of time as developer. As long as there is a method of exporting the file into a certain standard format, it's all fine with me.

As far as I've noticed, many of the uses in Inkscape are not what the project started about. Cutters, Egraving tools, Web design, Presentations, were never the scope of SodiPodi as far as I know. I think what makes Inkscape unique is the fact that a whole community can add to it and build on a very strong basis. I've had a look at the latest dev builds as well, great stuff!

Kudos to everyone who put time and effort in it, I for one use Inkscape professionally. With strong competitors like Adobe, and Corel, I think that means something.

Jelle wrote:Here's an example of the basic code, basically two lines with Dash Array and a clippath. (…)

Thanks for the example, very helpful! Unfortunately, neither Inkscape stable nor current trunk builds (with the new cairo-based renderer) support such use of dash arrays scaling (in width) relative to the size of the parent container. I'll try to further investigate the reasons, but first and foremost this seems due to the '%' units used in the presentation attributes for the stroke width (as well as the stroke-dasharrays):

• Bug #166725 “percentage units don't work”
  (the issue probably relates to a an error/conflict converting between presentation attributes ('%' as length valid unit) and CSS styling (no '%' unit allowed according to the spec). Inkscape rewrites presentation attributes as CSS style properties as soon as a styled object (or its parent container) is edited).

Possibly also contributing: missing support in Inkscape for units in stroke-dasharrays

• Bug #444463 “Specifying stroke-dasharray units (e.g. mm, pt) doesn't work)”
• Bug #597353 “Dash pattern imported with pixels as units, instead of mm”

This type of hatching renders ok in Inkscape after changing the stroke width of the container group to an absolute (px, SVG user units) value, and adjusting the dash array.

Jelle wrote:If my abilities as a coder weren't so poor I'd probably proceed implementing this myself, but it does seem like something doable, using only already available methods in SVG.

You might consider writing a blueprint for the proposed Dasharray GUI (mockup), detailing the technical details aspects of such hatchings (sample source and rendering), requirements needed in Inkscape (support of certain SVG features), use cases and possibly further enhancements.

Detailed blueprints (hosted at LaunchPad), with a corresponding spec page (maintained in Inkscape's wiki) can ease the steps to get it implemented (e.g. by new contributors or GSoC students).

~suv wrote:This type of hatching renders ok in Inkscape after changing the stroke width of the container group to an absolute (px, SVG user units) value, and adjusting the dash array.

Here's a (non-scaling) example made with Inkscape (and the built-in XML Editor): link

Okay,.. here is an example, can't post files, so just added the code here.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg id="svg2987" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020 768" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

<defs id="defs2989">

<clipPath id="clipPath4234" clipPathUnits="userSpaceOnUse">

<path id="path4236" d="m101,567a27.5,27.5,0,1,1,-55,0,27.5,27.5,0,1,1,55,0z" transform="matrix(6.408619,3.7000179,-3.7000179,6.408619,1962.6381,-3649.038)" stroke-dashoffset="0" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" stroke-width="1" fill="none"/>

</clipPath>

</defs>

<metadata id="metadata2992">

<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/>

</cc:Work>

</rdf:RDF>

</metadata>

<g id="layer1">

<g id="g4138" clip-path="url(#clipPath4234)" transform="matrix(0.8660254,-0.5,0.5,0.8660254,9.7353513,341.74386)">

<rect id="rect3983" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="201" stroke-width="0.895" fill="#F00"/>

<rect id="rect3985" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="15.9" stroke="#000" stroke-linecap="butt" y="9" x="125" stroke-width="0.479px" fill="#000"/>

<rect id="rect3987" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.87" stroke="#000" stroke-linecap="butt" y="8.86" x="157" stroke-width="0.338px" fill="#000"/>

<rect id="rect3989" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.88" stroke="#000" stroke-linecap="butt" y="8.87" x="173" stroke-width="0.338px" fill="#000"/>

<rect id="rect3991" stroke-linejoin="miter" fill-rule="evenodd" height="521" width="7.87" stroke="#000" stroke-linecap="butt" y="5.37" x="187" stroke-width="0.339px" fill="#000"/>

<path id="path3993" stroke-linejoin="miter" d="m125,263,78.7,0-1.12,0" stroke="#F00" stroke-linecap="butt" stroke-width="0.93184805px" fill="none"/>

<rect id="rect3995" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="193" stroke-width="0.895" fill="#FFF"/>

<rect id="rect3997" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="185" stroke-width="0.895" fill="#FFF"/>

<rect id="rect3999" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="179" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4001" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="171" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4003" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="163" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4005" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="155" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4007" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="139" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4009" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="123" stroke-width="0.895" fill="#F00"/>

<rect id="rect4106" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="15.9" stroke="#000" stroke-linecap="butt" y="9" x="205" stroke-width="0.479px" fill="#000"/>

<rect id="rect4108" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.87" stroke="#000" stroke-linecap="butt" y="8.86" x="237" stroke-width="0.338px" fill="#000"/>

<rect id="rect4110" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.88" stroke="#000" stroke-linecap="butt" y="8.87" x="253" stroke-width="0.338px" fill="#000"/>

<rect id="rect4112" stroke-linejoin="miter" fill-rule="evenodd" height="521" width="7.87" stroke="#000" stroke-linecap="butt" y="5.37" x="267" stroke-width="0.339px" fill="#000"/>

<rect id="rect4114" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="15.9" stroke="#000" stroke-linecap="butt" y="9" x="285" stroke-width="0.479px" fill="#000"/>

<rect id="rect4116" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.87" stroke="#000" stroke-linecap="butt" y="8.86" x="317" stroke-width="0.338px" fill="#000"/>

<rect id="rect4118" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.88" stroke="#000" stroke-linecap="butt" y="8.87" x="333" stroke-width="0.338px" fill="#000"/>

<rect id="rect4120" stroke-linejoin="miter" fill-rule="evenodd" height="521" width="7.87" stroke="#000" stroke-linecap="butt" y="5.37" x="347" stroke-width="0.339px" fill="#000"/>

<rect id="rect4122" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="15.9" stroke="#000" stroke-linecap="butt" y="9" x="365" stroke-width="0.479px" fill="#000"/>

<rect id="rect4124" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.87" stroke="#000" stroke-linecap="butt" y="8.86" x="397" stroke-width="0.338px" fill="#000"/>

<rect id="rect4126" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.88" stroke="#000" stroke-linecap="butt" y="8.87" x="413" stroke-width="0.338px" fill="#000"/>

<rect id="rect4128" stroke-linejoin="miter" fill-rule="evenodd" height="521" width="7.87" stroke="#000" stroke-linecap="butt" y="5.37" x="427" stroke-width="0.339px" fill="#000"/>

<rect id="rect4130" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="15.9" stroke="#000" stroke-linecap="butt" y="9" x="445" stroke-width="0.479px" fill="#000"/>

<rect id="rect4132" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.87" stroke="#000" stroke-linecap="butt" y="8.86" x="477" stroke-width="0.338px" fill="#000"/>

<rect id="rect4134" stroke-linejoin="miter" fill-rule="evenodd" height="517" width="7.88" stroke="#000" stroke-linecap="butt" y="8.87" x="493" stroke-width="0.338px" fill="#000"/>

<rect id="rect4136" stroke-linejoin="miter" fill-rule="evenodd" height="521" width="7.87" stroke="#000" stroke-linecap="butt" y="5.37" x="507" stroke-width="0.339px" fill="#000"/>

<rect id="rect4658" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="201" stroke-width="0.895" fill="#F00"/>

<path id="path4660" stroke-linejoin="miter" d="m125,263,78.7,0-1.12,0" stroke="#F00" stroke-linecap="butt" stroke-width="0.93184805px" fill="none"/>

<rect id="rect4662" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="193" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4664" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="185" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4666" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="179" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4668" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="171" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4670" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="163" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4672" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="155" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4674" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="139" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4676" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="261" x="123" stroke-width="0.895" fill="#F00"/>

</g>

<rect id="rect3831" stroke-dashoffset="0" height="87.5" width="117" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="422" x="58.9" stroke-width="1.27" fill="#FFF"/>

<rect id="rect3872" stroke-dashoffset="0" height="8.2" width="26.9" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="426" x="63.2" stroke-width="0.945" fill="#808080"/>

<rect id="rect3837" stroke-dashoffset="0" height="32" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="435" x="63.4" stroke-width="0.887" fill="#CCC"/>

<rect id="rect3839" stroke-dashoffset="0" height="9.15" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="477" x="63.4" stroke-width="1" fill="#CCC"/>

<rect id="rect3874" stroke-dashoffset="0" height="9.77" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="435" x="63.4" stroke-width="0.49" fill="#FFF"/>

<text id="text3841" style="letter-spacing:0px;word-spacing:0px;" line-height="125%" font-weight="normal" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="432.78632" x="64.854469" font-family="Arial" xml:space="preserve" fill="#000000"><tspan id="tspan3843" y="432.78632" x="64.854469"><tspan id="tspan4424" font-family="Arial" font-style="normal" font-stretch="normal" font-variant="normal" font-weight="normal" fill="#ffffff">Array1</tspan> +/- 8</tspan><tspan id="tspan3845" y="442.78632" x="64.854469">16</tspan><tspan id="tspan3847" y="452.78632" x="64.854469">16</tspan><tspan id="tspan3849" y="462.78632" x="64.854469">8</tspan></text>

<rect id="rect3851" stroke-dashoffset="0" height="32" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="435" x="104" stroke-width="0.292" fill="#f9f9f9"/>

<rect id="rect3853" stroke-dashoffset="0" transform="scale(1,-1)" height="4.65" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-440" x="104" stroke-width="0.111" fill="#CCC"/>

<text id="text3855" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="473.78632" x="64.854469" font-family="Arial" line-height="125%" fill="#000000"><tspan id="tspan3857" x="64.854469" y="473.78632">Angle<tspan id="tspan3870" style="baseline-shift:super;" font-weight="normal" font-size="65.00091553000000000%" font-style="normal" font-stretch="normal" font-variant="normal" font-family="Arial" fill="#000000">o</tspan></tspan><tspan id="tspan3863" x="64.854469" y="483.78632">30</tspan></text>

<rect id="rect3876" stroke-dashoffset="0" transform="scale(1,-1)" height="10.2" width="118" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-422" x="58.5" stroke-width="0.436" fill="#2c5aa0"/>

<text id="text3878" style="letter-spacing:0px;word-spacing:0px;" line-height="125%" font-weight="normal" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="418.86224" x="64.025597" font-family="Arial" xml:space="preserve" fill="#ffffff"><tspan id="tspan3880" y="418.86224" x="64.025597">Dash Array Hatch Tool</tspan></text>

<rect id="rect4238" stroke-dashoffset="0" height="8.2" width="46.5" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="426" x="123" stroke-width="1.24" fill="#808080"/>

<rect id="rect4240" stroke-dashoffset="0" height="20.7" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="435" x="123" stroke-width="0.713" fill="#FFF"/>

<rect id="rect4244" stroke-dashoffset="0" height="9.77" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="435" x="123" stroke-width="0.49" fill="#000"/>

<text id="text4246" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="432.78632" x="124.85447" font-family="Arial" line-height="125%" fill="#000000"><tspan id="tspan4248" font-weight="normal" font-style="normal" font-stretch="normal" font-variant="normal" y="432.78632" x="124.85447" font-family="Arial" fill="#ffffff">Auto Hatch</tspan><tspan id="tspan4250" font-weight="normal" font-style="normal" font-stretch="normal" font-variant="normal" y="442.78632" x="124.85447" font-family="Arial" fill="#999999">1 px </tspan><tspan id="tspan4268" font-weight="normal" font-style="normal" font-stretch="normal" font-variant="normal" y="452.78632" x="124.85447" font-family="Arial" fill="#000000">8 px</tspan><tspan id="tspan4254" x="124.85447" y="462.78632"/></text>

<rect id="rect4274" stroke-dashoffset="0" transform="scale(1,-1)" height="4.65" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-467" x="104" stroke-width="0.111" fill="#CCC"/>

<rect id="rect4276" stroke-dashoffset="0" transform="scale(1,-1)" height="11.5" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-451" x="104" stroke-width="0.175" fill="#CCC"/>

<path id="rect4278" fill="#000" d="m105,463,4.38,0-2.19,2.96z"/>

<path id="path4281" d="m105,439,4.38,0-2.19-2.94z" fill="#000"/>

<rect id="rect4283" stroke-dashoffset="0" height="8.2" width="26.9" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="457" x="124" stroke-width="0.945" fill="#808080"/>

<rect id="rect4285" stroke-dashoffset="0" height="20.2" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="466" x="124" stroke-width="0.705" fill="#CCC"/>

<rect id="rect4287" stroke-dashoffset="0" height="9.77" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="466" x="124" stroke-width="0.49" fill="#FFF"/>

<text id="text4289" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="463.90918" x="125.3229" font-family="Arial" line-height="125%" fill="#000000"><tspan id="tspan4291" x="125.3229" y="463.90918"><tspan id="tspan4426" font-family="Arial" font-style="normal" font-stretch="normal" font-variant="normal" font-weight="normal" fill="#ffffff">Array#</tspan> +/- 2</tspan><tspan id="tspan4297" x="125.3229" y="473.90918">1</tspan><tspan id="tspan4316" x="125.3229" y="483.90918">2</tspan><tspan id="tspan4318" x="125.3229" y="493.90918"/></text>

<rect id="rect4299" stroke-dashoffset="0" height="20" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="466" x="165" stroke-width="0.23" fill="#f9f9f9"/>

<rect id="rect4301" stroke-dashoffset="0" transform="scale(1,-1)" height="4.65" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-471" x="165" stroke-width="0.111" fill="#CCC"/>

<rect id="rect4303" stroke-dashoffset="0" transform="scale(1,-1)" height="4.65" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-486" x="165" stroke-width="0.111" fill="#CCC"/>

<rect id="rect4305" stroke-dashoffset="0" transform="scale(1,-1)" height="4.92" width="4.99" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-476" x="165" stroke-width="0.114" fill="#CCC"/>

<path id="path4307" d="m165,482,4.38,0-2.19,2.96z" fill="#000"/>

<path id="path4309" fill="#000" d="m165,470,4.38,0-2.19-2.94z"/>

<text id="text4585" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="10px" font-style="normal" font-stretch="normal" font-variant="normal" y="538.34363" x="60.36422" font-family="Arial" line-height="125%" fill="#000000"><tspan id="tspan4587" x="60.36422" y="538.34363">drag nodes along line</tspan><tspan id="tspan4589" x="60.36422" y="550.84363">double click or + to add node</tspan><tspan id="tspan4591" x="60.36422" y="563.34363">click node to select and modify -, del</tspan><tspan id="tspan4593" x="60.36422" y="575.84363">right click on begin node gives menu</tspan><tspan id="tspan4656" x="60.36422" y="588.34363">right click on end node enables scale dragging</tspan></text>

<rect id="rect4646" stroke-dashoffset="0" height="9.15" width="46" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="496" x="63.4" stroke-width="1" fill="#CCC"/>

<text id="text4648" style="letter-spacing:0px;word-spacing:0px;" line-height="125%" font-weight="normal" font-size="8px" font-style="normal" font-stretch="normal" font-variant="normal" y="492.78632" x="64.854469" font-family="Arial" xml:space="preserve" fill="#000000"><tspan id="tspan4650" y="492.78632" x="64.854469">Scale</tspan><tspan id="tspan4654" y="502.78632" x="64.854469">1</tspan></text>

<rect id="rect4658-5" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="39.1" stroke-width="0.895" fill="#F00"/>

<path id="path4660-8" stroke-linejoin="miter" d="m250,507,68.2-39.3-0.974,0.562" stroke="#F00" stroke-linecap="butt" stroke-width="0.93184805px" fill="none"/>

<rect id="rect4662-1" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="30.6" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4664-9" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="22.6" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4666-0" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="16.6" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4668-5" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="8.59" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4670-4" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="0.587" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4672-8" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="-7.41" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4674-8" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="-23.4" stroke-width="0.895" fill="#FFF"/>

<rect id="rect4676-4" transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" height="4.1" width="4.1" stroke="#F00" stroke-dasharray="none" stroke-miterlimit="4" y="562" x="-39.4" stroke-width="0.895" fill="#F00"/>

</g>

</svg>

Not sure what`s the issue, but I`m eager to hear what might make you unable to post regular .svg?


http://dl.dropbox.com/u/5630231/hatch%20post.svg

... as well as I`m interested in hatch effect. You are aware that plain text editor provides saving codes as .svg, right?

Maestral,

I'm currently in Mainland China, where all those nifty file sharing cloud services are blocked by Da Gov. Finding file space is therefore a bit a pain in the ass. It's there, but only in Chinese UI's, so unless I spend 6 years learning the arcane writing here I'm a tad lost. Hence just dumping the whole example as SVG code. Forgot to put it in a nice code format though.. my bad.

And sure you can do that in Notepad++, probably even in the XML editor. That also applies to all the other functionality in Inkscape, but I am mighty glad I can just add my filters with feTurbulence etc. through a GUI.

The whole point is that using Dash Arrays for hatching makes sense for being lightweight on the code side of hatching. Sure you can just clone a group of lines and clip it, but why not define it in a single line of code rather than many lines of <use>. (open 1st code example in browser for better understanding the issue).

I am thinking of a method similar to creating gradients in Inkscape, with an addition to define more than one Dash Arrayed line with an angle for the Hatching and a simpler version of it to create just an arbitrary Dash Array. The nice thing of Dash Arrays being that they are very light weight on the SVG code side. As I am using SVG to design for the web, that really is an issue. If you can do something in 100 Bytes rather than 1000 Bytes for the same effect, without having to revert to .js, it certainly is worth doing so.

Some subforums here allow file attachments, and others don't. I should make a list, so I can remember (since I don't have admin permissions, I can't look it up). Anyway, I suspect this one does not allow attachments. But you should still be able to insert images, using the message editor's IMG tags.

Apologies for inconvenience.

Jelle,

Sorry to hear about the inconvenience... no hard feelings, I hope. I was just curious.
Your last explanation makes the whole thing even more interesting. For a few times I was also in a situation to make some plan B`s with hatching and I`m fully with you on this one. Hope you`ll find a way to produce it and I`ll try the same on my side, since your approach gave me some more ideas how to use/apply it.

Full sails,
Maestral

I'm not sure what a "dash array tool" would do, which is why I haven't replied to this topic. But there is an LPE Hatches. Is this for a different kind of hatching?

Hi Brynn,

To understand the issue at hand here I suggest you use the LPE hatching to create a similar effect to what I made in the first code example. The code example you can copy and paste into notepad (for windows) or gedit (for Linux) and save as test.svg (make sure to have hide file extensions turned off in your windows explorer or notepad will cheerfully add .txt to it, making parsing a tad difficult) open it in your SVG capable browser and have a look.

Now try to recreate a similar thing in Inkscape with your LPE Hatching tool and save the file.

Then compare the size of my code example and the Inkscape file. How much bigger is the Inkscape file? 30 times? 100 times?

Next step,..

Go to the supermarket in your area and pick up a kilo package of sugar. Throw this in the air and catch it.
Take as many packets of sugar as the Inkscape file was bigger (i.e. 30 packages) and do the same thing.
The basic principle of throwing sugar in the air is the same, but the amount of weight you need to shift to do the same thing is different.
Your computer works on the same principle. Less weight is more efficient.
Either use this as a mind exercise or actually do it literally for the heck of it, I guess you'll get the point.