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).
Related
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.
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.
What is the easiest way to transform the (x,y) coordinates of an SVG image in the following way:
x --> x'(x,y)
y --> y'(x,y)
Example:
x --> x^2+y^2
y --> sinx + cosy
The method can either modify the original SVG file or produce a new SVG file containing the modified SVG image.
Remember that SVG includes the following functions:
translate()
rotate()
scale()
skew()
matrix()
I initially thought you could use the matrix transformation function that is available to the SVG system. Because that matrix is static, I'm not positive you will get what you are after. A lot depends on what the transform matrix looks like.
Here's a sample jsfiddle.
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg" />
</svg>
<h2>A skew transformation along the y-axis</h2>
<svg version="1.1" baseProfile="full" width="300" height="400" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg"
transform="matrix(1,.5,0,1,0,0)" />
</svg>
Have you looked at the D3.js library for your projection stuff? D3 uses SVG elements, and they've got some pretty good tools. I see folks writing additional tools for that as well. Have you seen the geo projections project for D3 at Github? I do see d3.geo.equirectangular option there. Perhaps that will get you to beer quickly?
I do know you can do much more involved stuff using Canvas. You'd have to convert your SVG image over to Canvas, but that is do-able. Check out this awesome tutorial for swirling an image dynamically, in canvas.
So when you export an Adobe Illustrator file to SVG format, paths are encoded using the SVG path syntax:
http://www.w3.org/TR/SVG/paths.html
If you look at the "path data" element, it's possible to have "move to" commands embedded into a path:
http://www.w3.org/TR/SVG/paths.html#PathData
In other words, you draw a few lines in the path, pick up the pen and move it somewhere else, and continue the same path.
I have been trying to figure out how to do this in Illustrator to no avail. You can add on to an existing path but it seems you can only do this by extending the path from one of the endpoints. I don't want to do this: I want to continue the path from somewhere else.
You can get something sort of like this by grouping two disjoint paths. However when Illustrator does the svg export it just creates two <path> tags and puts them inside a <g> tag which is not what I want. If I manually edit an svg file with a text editor, adding "move to" commands, and I import them, it looks like maybe what Illustrator is doing is creating a group, but I can't tell because I don't know how to select and object and figure out if it is a group or not.
I think the only way would be to mak a compound path. Select both paths you want to use as a single path and go to Object > Compound Path > Make.
If this doesnt work then its probably not possible. This is the only way i can think of in which a non-contiguous path would even exists as far as AI sees it.
Create a file that has a path using move-to commands:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="-25 -25 100 100">
<path d="M0,0 L50,0 M50,50 L0,50" stroke="black" />
</svg>
Open this file in Illustrator. Note that there is a single element named <Compound Path> in the Layers palette.
Choose command Object > Compound Path > Release. Now there are two paths selected.
Choose command Object > Compound Path > Make.
Save as SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792"
enable-background="new 0 0 612 792" xml:space="preserve">
<path stroke="#000000" d="M128,218h306 M434,524H128"/>
</svg>
Cheer!
Using SVG via Inkscape:
I have several <use>-tags, which are reusing the same <line> (from the defs), while transforming it.
Now I want to create a shape (<path>) by combining some "transformed lines" and connecting the end-points. Inkscape has a tool to combine paths, but it seems to me that is not possible to combine several use-tags.
How can I create a separate path from a <use>-tag, to later combine them into one path?
simplified example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="extended_segment">
<line style="stroke:#000000;" y2="240" x2="615" y1="240" x1="240"/>
</symbol>
</defs>
<use xlink:href="#extended_segment" transform="matrix(0,-1,1,0,330,615)" />
<use xlink:href="#extended_segment" transform="matrix(0.5,-0.8660254,0.8660254,0.5,242.1539,462.8461)" />
</svg>
This example should result in a triangle-shaped path…
Finally found it: It's unlinking clones, which will create new path/line-elements.
If necessary, a clone is easy to convert to a regular object – that is, to cut its link to the original. For this, go to Edit > Unlink Clone or press Alt+Shift+D when the clone is selected.
Here is the source