SVG chalk line troubles

Question

for a project I would like to draw a chalk-like border around a SVG rectangle object. I managed to add a pattern to a 4px wide line and this does resemble chalk somewhat, but I am actually looking into making the line more realistic.

What I have tried so far is creating a chalk like texture in Illustrator and exporting this to SVG, but how can I than import this SVG file as pattern in my existing SVG without having to copy all the path information by hand? And how can I make this texture as efficient as possible so the viewer won't have to load 23 MB of path information?

I hope you guys can help me out.

Cheers,

Hide

P.S. This is what I have come up with so far:

SVG Chalk like line as far as I got

Answer 1

I'd suggest using svg filters, if you just want to quickly experiment, open your file in Inkscape, select one of your rectangles, then add a "Chalk and sponge" filter, and play with the parameters until you get something you're happy with.

That's just a start, but you can get quite nice results from that, here's an example:

    <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3">
        <feTurbulence baseFrequency="0.32065" seed="115" result="result1" numOctaves="1" type="turbulence"/>
        <feOffset result="result2" dx="-5" dy="-5"/>
        <feDisplacementMap scale="10" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
        <feGaussianBlur stdDeviation="1.1169"/>
    </filter>

Then you use that on shapes and text as needed, like this for example:

    <text filter="url(#chalk)" font-size="26px" fill="white">f(x) = 4x + 7</text>
    <rect filter="url(#chalk)" width="150" stroke="#FFF" stroke-dasharray="16,4" stroke-width="4" fill="none"/>