I'm trying to generate svg-Code in a web-application.
Here's an example output:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full"
width="1000px" height="600px">
<rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/>
<rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/>
<rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/>
</svg>
There should be three rotated Rectangles, but somehow in Chrome, Safari, and Inkscape only one of them is displayed. I did google and have no clue what is wrong.
Your problem is caused by the negative heights of the second and third <rect />.
If you generate this code automatically make sure these values are positive. For example, using JavaScript, wrap them up in Math.abs( height ).
Related
For a toy project I'm working with random flag designs and random flag colors. Since the paths are a huge chunk of ugly exported SVG, I'd like to have all these shapes put into a library SVG. That way, the generator would only have to create a small, simple-to-read stub to define the colors, and import the designs from the library.
A pair of demonstration files.
flaglib.svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="300px" viewBox="0 0 500 300" xml:space="preserve">
<g id="Design1">
<rect width="500px" height="300px" fill="url(#BACKGROUND_PRIMARY)" />
<circle cx="250px" cy="150px" r="90px" fill="url(#FOREGROUND_PRIMARY)" />
</g>
...
</svg>
flagstub.svg:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="2.0" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="500px" height="500px" viewBox="0 0 500 500" xml:space="preserve">
<defs>
<linearGradient id="BACKGROUND_PRIMARY"><stop offset="50%" stop-color="#F00" /></linearGradient>
<linearGradient id="FOREGROUND_PRIMARY"><stop offset="50%" stop-color="#FF0" /></linearGradient>
</defs>
<use href="flaglib.svg#Design1"></use>
</svg>
The tag with the ID #BACKGROUND_PRIMARY is only defined once, so when it imports the missing text before it renders, it shouldn't be pulling a value for that from anywhere else. And yet, they ignore the values set.
So: how can the SVG elements imported from the library file use the colors defined in the stub fule?
What browser(s) are you testing with? Last I checked, only Firefox properly supports external use references.
See this question for more discussion on this topic.
I have an SVG file generated by Sketch that looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="72px" height="47px" viewBox="0 0 72 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd" stroke-linecap="square">
<g id="Group" transform="translate(4.000000, 3.000000)"
stroke="#000000" stroke-width="9">
<path d="M0.5,39.5 L63.5,39.5" id="Line"></path>
<path d="M0.5,20.5 L63.5,20.5" id="Line-Copy"></path>
<path d="M0.5,1.5 L63.5,1.5" id="Line-Copy-2"></path>
</g>
</g>
</svg>
I'm trying to edit it in a text editor so that when I import it as an icon button, it can be colored by FileMaker.
I have repeatedly read that adding class="fm_fill" is what's required. I've tried adding this to the outside <g> tag, the inside <g> tag and to each of the <path> tags. I've tried removing superfluous attributes, such as the outside <g> tag's stroke and stroke-width attributes. I've tried consolidating the <g> tags and changing the fill attribute in the outside <g> tag. I've also tried removing the <path> id attributes and using self-closing <path> tags.
My test is a simple button with an icon that I first color. Then I add the edited SVG and see if it retains the color. So far I haven't been able to get it to do so.
Assuming you want the horizontal bars to be colored in FileMaker, you need to convert the stroke to a filled path or a rect.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
<g id="Group" transform="translate(4.000000, 3.000000)">
<rect x="-4" y="35" width="72" height="9"/>
<rect x="-4" y="16" width="72" height="9"/>
<rect x="-4" y="-3" width="72" height="9"/>
</g>
</g>
</svg>
You dont "need" to add the class="fm_fill" per se, but adding a raw SVG does not show the icon in the icon selector, just a blank entry.
If you add the class="fm_fill" and a default fill color, you will see the icon in the icon selector in the default fill color, making it much easier to work with.
Like this:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
<g id="Group" class="fm_fill" fill="grey" transform="translate(4.000000, 3.000000)">
<rect x="-4" y="35" width="72" height="9"/>
<rect x="-4" y="16" width="72" height="9"/>
<rect x="-4" y="-3" width="72" height="9"/>
</g>
</g>
</svg>
In the following screenshot, you can see both variants. The left blue icon is just your raw converted icon, then colored blue in FileMaker. It is not visible in the icon selector, it is the blank entry next to the selected icon. The selected red button's icon is colored red in FileMaker and has the class and default fill applied and thus is visible in the icon selector.
Hope this helps.
I have created an SVG file to display an icon for an open folder.
It consists of a rectangle for the tab and a rectangle for the backleaf of the folder, with the open leaf represented by a polygon.
Image editors display the intended result, but browsers seem to ignore the polygon.
what am I missing?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="folder_icon" xmlns="http://www.w3.org/2000/svg"
width="90" height="60" viewbox="0 0 90 60" preserveAspectRatio="xMidYMid slice"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g width="50%" height="80%">
<g id="g3" fill="#ffee77" stroke="#bb7711" stroke-width="2px" opacity="0.7">
<g id="g2">
<rect x="16%" y="1%" rx="6%" ry="6%" width="30%" height="30%" />
<rect x="1%" y="16%" rx="0%" ry="0%" width="84%" height="82%" />
<polygon points="17% 20%, 90% 20%, 75% 59%, 1% 59%" />
</g>
</g>
</g>
</svg>
The same file converted to a PNG is displayed as intended, but I would prefer to use the scalable graphic.
fiIs it possible to Mask an SVGPattern?
I've made the following SVG, but I can't get the mask to work.
Or should I be using clipPath?
<?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="160px" height="600px" viewBox="0 0 160 600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="circlePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="10" height="10"
viewBox="0 0 10 10" fill="blue" >
<circle cx='4' cy='4' r='4'/>
</pattern>
<clipPath id="clipPath" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" />
</clipPath>
</defs>
<!-- Outline the drawing area in blue -->
<g id="box">
<rect fill="url(#circlePattern)" width="160" height="600" clip-path="url(#clipPath)"/>
</g>
</svg>
UPDATE: (I would like to use this complex path)
I can't seem to use this path to create the mask/clipPath
<path style="fill:#FFFFFF;" d="M9.35,37.5c4.1,2.467,8.566,3.7,13.4,3.7
c7.667,0,13.783-2.05,18.35-6.15c5.066-4.566,7.6-11.167,7.6-19.8c0-5.7-2.367-12.133-7.1-19.3c-4.1-6.267-9.7-12.684-16.8-19.25
c-5.133-4.8-10.383-8.983-15.75-12.55c-2.4-1.6-3.883-2.6-4.45-3c-1.733-1.033-3.267-1.8-4.6-2.3h-0.05c-1.3,0.5-2.8,1.267-4.5,2.3
c-0.633,0.434-2.133,1.417-4.5,2.95c-5.467,3.667-10.867,8-16.2,13c-6.967,6.566-12.467,12.917-16.5,19.05
c-4.633,7.1-6.95,13.467-6.95,19.1c0,8.633,2.534,15.233,7.6,19.8c4.567,4.1,10.684,6.15,18.35,6.15c4.833,0,9.3-1.233,13.4-3.7
c4-2.367,7.1-5.6,9.3-9.7C2.25,31.9,5.383,35.133,9.35,37.5z"/>
Your mask rect has no fill specified so it will use the default which is black i.e. i.e. rgba(0, 0, 0, 1). So the luminance of the mask is 0 everywhere and you see nothing.
If you change the fill on the mask <rect> to fill="white" you'll see the mask act as a clip which would seem to be what you're looking for. Other colours like "orange" or "blue" as they have a luminance which is neither 0 nor 1 will give you an intermediate effect.
clipPaths clip a shape to a boundary. Masks generally modify colours, you can use them to clip by having a white mask but if all you want is to clip something then a clipPath is faster.
clipPaths and masks can contain any graphics element including a path.
I'm new to SVG and a bit surprised that this example is cropped and not scaled? Whats missing to make it scaleable/sizeable using width/height in the svg element?
<?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 xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="200px"
height="200px"
viewBox="0 0 400px 400px">
<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="200px" cy="60px" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="200px" cy="60px" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="200px" cy="60px" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>
Because if your viewBox is invalid the viewport is determined by the width and height of the outermost element (in your case the SVG element at 200x200px). Since your content overflows this it is cropped.
By defining a valid viewBox of 400x400 you gave your content enough room inside the viewBox but it was all scaled to fit inside the SVG element. The viewBox is a sort of virtual space mapped onto the real space.
The issue is fairly involved. The viewport and the viewbox are different things. The spec covers both in detail: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute