How to set a hatch pattern style in a svg - svg

I've written some SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150" cy="75" rx="100" ry="75" fill="rgb(200,240,120)" stroke="rgb(200,240,120)" stroke-width="3px" />
</svg>
It renders like this
I want to convert the fill color render effect to look like this
I have read the w3c document about SVG. I tried filter but It doesn't work like those images.

What you want to do is called a "hatch pattern". Do a web search for how to do that in SVG. Basically you need to define your hatch using the <pattern> element.
The following SO question may help you: Simple fill pattern in svg : diagonal hatching
Note that the unfinished SVG2 standard defines a new <hatch> element that will make creating hatch patterns a lot easier. However you cannot use this yet because no browser has implemented <hatch> yet.

Related

Is there a way to apply/bake a mask or clip to an svg, leaving you with one path?

I have a set of svgs I need to minify and I noticed that many of them have two paths when they could just use one path. They use one path for the shape and one for the color.
I can manually unset the mask and then do an intersect operation on each but this is very time consuming and not scalable.
This file is an example of the kind of clip I'm talking about:
https://svgur.com/s/Eac
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 284 284" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><clipPath id="_clip1"><circle cx="140.476" cy="140.476" r="42.52"/></clipPath><g clip-path="url(#_clip1)"><rect x="57.702" y="57.702" width="165.548" height="165.548" style="fill:#ff91a5;"/></g></svg>

Display of SVG on Leaflet map

I have a moderately large SVG to be displayed as an overlay on a Leaflet map - it's basically a selection of roads from a road network. The leaflet map is instantiated with:
testMap = L.map('mapdiv', { renderer: L.svg({ padding: 100 }) })
.setView([33.085, -96.815], 11);
and the SVG layer is created with:
var imgUrl = url, imgBnds;
L.imageOverlay(imgUrl, imgBnds, {opacity:0.3}).addTo(testMap);
This all displays nicely when zoomed out, but when zooming in, the SVG gets tiled, and only the top-left tile is displayed even though this is not the area being shown in the map.
The SVG has the following:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="1920" height="767"
clip-path="url(#MapClipRectangle)" style="overflow:hidden;text-rendering:optimizeLegibility" xmlns="http://www.w3.org/2000/svg">
</desc>
<defs>
<clipPath clipPathUnits="userSpaceOnUse" id="MapClipRectangle">
<rect x="0" y="0" width="1920" height="767" />
</clipPath>
<symbol id="1" style="fill:none">
<path d="M985.96 476.76 l-0.26 0.06" />
<!-- ... Many Symbols and Paths, plus some Polygons, Text, Line_artwork, Map_decoration and a Map_frame... -->
And it ends up looking like this (example actually shows the top-left tile, but if I zoom in to the right, you don't actually see anything from the overlay SVG):
How do you stop/control this behaviour?
Sample SVG for which this behaviour occurs
I have not investigated this question in any depth, but in the interest of having some answer at all that might help:
It seems unusual to me that you want to use an svg for geospatial data like a road network.
If someone runs into a similar problem in the future, I would recommend, rather than trying to fix the svg rendering, convert the data to geojson which is more of a standard option for this sort of data display need and then style as needed using the options in leaflet.
To OP, did you ever find a solution?
As a note, it is not clear to me which part of the images posted are svg's vs which parts are basemap or other layers.

Why are complicated elements like XMLNS needed in the SVG-tag?

I'm creating an SVG. The SVG-tag looks like this:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">
If I replace that with a simple <svg width="800" height="800"> tag, the document is blank. In Chrome, it works if I take away the upper tag but not the XMLNS. In IE11, as soon as I take away anything (the DOCTYPE, the XMLNS, the PUBLIC...) the document is blank. Why do I need such complicated elements?
SVG files are XML files. As such, when they are standalone files, they need some sort of pre-amble so that whatever parsing it knows what to do. So standalone SVG files need to at least have the xmlns attribute. The browser requires that. However, the DocType is not necessary unless you want to do proper XML validation.
When an SVG is inlined in the body of an HTML page, you don't need either. The HTML parser knows about SVG content and knows what to do.
They aren't needed. The trick is you need to use a mime type of text/html rather than image/svg+xml (or any other XML mime type).
<!doctype html>
<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
</svg>
If you use an XML mime type then XML supports namespaces and you have to define them hence the need for the xmlns attributes to distinguish whether <a> is an html <a> with a src attribute or an SVG <a> element with an xlink:href attribute. HTML just magically guesses at that.

"Flatten" transform down to Path?

Given the following SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1891px" height="1492px" viewBox="0 0 1891 1492" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(352 500)">
<path d="M1,0 L1,400 C0.999999169,799.99998 201,1205 601,1439.4375 C1001,1205 1201,800 1201,400 L1201,0 L1,0 Z M1,0"></path>
<path d="M1,0 L1,960.824531 C1.00000084,1439.4375 489.311066,1258.28207 600.483175,1439.4375 C708.904794,1258.28211 1201,1439.4375 1200.99997,960.824531 C1200.99996,960.824531 1201,0 1201,0 L1,0 Z M1,0"></path>
</g>
</svg>
Are there any tools to automatically update the path points with the transform, and remove the transform from the group element?
I have an SVG app (Sketch) that outputs an SVG using transform attributes (if you make any adjustments to the path), but in my web app I need to actual path points to already be adjusted, and not use any transform attributes.
Clarification: The goal is to find an app or tool that will allow this to be performed on large SVG files, thus removing any transform attributes throughout the entire file.
Thanks!
There is an Inkscape extension, Apply Transforms, which I have found works well for removing transforms on elements and applying them to the sub-elements (adjusting a <rect>s width and height, for example).

XPointers in SVG

I've been trying to get XPointer URIs working in an SVG file, but haven't had any luck so far. After trying something more complicated and failing, I simplified it down to just referencing an ID. However, this still fails.
The spec seems pretty clear about this implementation:
http://www.w3.org/TR/SVG/struct.html#URIReference
I found an example online of what should be a working XPointer reference within an svg document. Here is the Original. Here is the version I copied out:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="simpleRect" width="100px" height="75px"/>
</defs>
<use xlink:href="#simpleRect"
x="50" y="50" style="fill:red"/>
<use xlink:href="#xpointer(id('simpleRect'))"
x="250" y="50" style="fill:yellow"/>
</svg>
This should display two rectangles... one red and one yellow. I tried rendering with Firefox 3.6 and Inkscape 0.47. No success. Only the Red rectangle shows.
What am I missing?
Thanks for any help you can offer
There is currently (as of 10 March 2016, SVG 1.1 Second Edition) no support for rendering XPointers in browsers. W3Schools writes about this as follows:
XPointer Browser Support
There is no browser support for XPointer. But XPointer is used in other XML languages.
It's kind of frustrating, because all the official documentation does not bother to distinguish between browser-supported (Internet ready) features of SVG and the technically-supported, purely XML-like features of SVG.
From the linking section of the spec:
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ] -or-
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
So what is the benefit of using xpointer syntax? All svg implementions I've seen have supported the alternative (shorter) syntax shown above (#myId). The xpointer syntax seems to be less well supported.

Resources