create text inside a rectangle using inkscape - svg

I've put some text inside a rectangle using inkscape so the tree is like
<svg:rect><svg:text><svg:tspan>text....
The problem is, I can't see the text. I've tried fiddling with the opacity of the rect to no avail. There should be a way of doing this from the UI?
Edit
example as requested
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="184.25197"
height="262.20471"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
version="1.0"
sodipodi:docname="ex1.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape">
<defs
id="defs4">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
gridtolerance="10000"
guidetolerance="10"
objecttolerance="10"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.64"
inkscape:cx="195.9221"
inkscape:cy="335.3072"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="640"
inkscape:window-height="675"
inkscape:window-x="44"
inkscape:window-y="44" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="opacity:0.25480766;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:12.94795799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2383"
width="150.87796"
height="84.226181"
x="18.221733"
y="39.557121">
<text
xml:space="preserve"
style="font-size:56.0331955px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
x="44.815186"
y="114.0088"
id="text2385"
transform="scale(1.0054479,0.9945816)"><tspan
sodipodi:role="line"
id="tspan2387"
x="44.815186"
y="114.0088">text</tspan></text>
</rect>
</g>
</svg>
I'd expect to be able to see this in inkscape.
The workaround is to put text on a layer above the box (the intent is that the box obscures the layers below it) and not try and get clever with nested tags. Shame it doesn't work though.

A rect element can't contain text elements, that's invalid according to the svg specification and will simply be ignored by compliant user agents.
Just put the text after the rect element to have them render on top.

Related

Understanding the Path of SVG Images

I am currently trying to understand the path function of SVG Images. I took a SVG from Wikipedia (map of the world, but everything is removed except for once little thing). This is the SVG Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="480"
width="960"
version="1.1"
id="svg11"
sodipodi:docname="map.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata17">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1002"
id="namedview13"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="256"
inkscape:cx="959.32356"
inkscape:cy="478.85011"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g9"
style="stroke:#000000;stroke-width:0.25;stroke-linejoin:bevel"
transform="matrix(2.0368307,0,0,2.0374975,-34.589547,-22.659498)">
<use
xlink:href="#a"
id="use2"
style="stroke-width:1.5"
x="0"
y="0"
width="100%"
height="100%" />
<g
id="a"
style="fill:#ffffff">
<path
d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
id="path6"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
The only part I am currently interested in is:
<path
d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
id="path6"
inkscape:connector-curvature="0" />
From what I understood, you need a command and parameters for the path. So the m would be "move relative to current cursor pos). The cursor is 0, 0, so it moved 0+481.4, 0+220, but after that there are just coordinates without a command. How are these to be interpreteted? Are these implicit l commands? For better unstanding, I am talking e.g. about -1,3.2 after the move. What does these do?
The answer by #Mehdi is not quite correct.
If a command is repeated (ie. the same as the previous one) then it can be omitted. So for example
L 1 2 L 3 4 L 5 6
can be abbreviated to
L 1 2 3 4 5 6
The exception is for M and m. In those cases L and l are substituted respectively.
So in #Mehdi's example
d="m 481.4,220 -1,3.2"
is actually equivalent to
d="m 481.4,220 l -1,3.2"
The definitive source for answers to questions like these is the Paths section of the SVG specification

Failing to convert SVG file to EPS file with Inkscape

An warning is given, and no output file is written, with the following:
$ inkscape --export-area-drawing --export-text-to-path --without-gui --export-eps=`pwd`/text.eps `pwd`/text.svg
** Message: CairoRenderer: empty bounding box.
** (inkscape-bin:21588): WARNING **: Failed to save pdf to: <current dir>/text.eps
Inkscape version: 0.92.2 5c3e80d, 2017-08-06
The contents of "text.svg" is given below.
The problem seems to be the text of the <flowPara> element near the end, specifically all the ............ Interestingly, if I have fewer periods (.) the problem doesn't occur (an EPS file is generated), or if I have the same number of more, but change to another character (say x), that also works.
Can this behaviour be explained?
Contents of "text.svg":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1700pt"
height="863pt"
viewBox="0 0 2185.0001 1078.75"
id="svg3342"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="text1_footage_height.svg">
<defs
id="defs3344" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#00ff00"
borderopacity="1"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.24748737"
inkscape:cx="688.58994"
inkscape:cy="-452.54794"
inkscape:document-units="pt"
inkscape:current-layer="layer1"
showgrid="false"
units="pt"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata3347">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,26.387778)">
<flowRoot
xml:space="preserve"
id="flowRoot3352"
style="font-style:normal;font-weight:normal;font-size:120px;line-height:125%;font-family:sans-serif;letter-spacing:1px;word-spacing:15px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
transform="translate(-162.85714,-214.95921)"><flowRegion
id="flowRegion3354"><rect
id="rect3356"
width="1700"
height="3975.4438"
x="162.85715"
y="190.17857"
style="letter-spacing:1px" /></flowRegion>
<flowPara
style="font-style:normal;
font-variant:normal;
font-weight:black;
font-stretch:normal;
font-family:Sari Offc;
-inkscape-font-specification:'Sari Offc Black';font-size:120px;line-height:125%;text-align:center;letter-spacing:1px;word-spacing:15px;text-anchor:middle;fill:#ffffff"
id="flowPara3406">................................................................................</flowPara>
</flowRoot></g>
</svg>

Svg does not work in Safari and Firerox

I have an svg created with Inkscape. I can see well the img in the original program Inkscape, it's also ok in Chrome but I see nothing in Safari and Firefox.
I tried to find the problem making a copy and make the document as simple as possible. I end up with just the letter "p" convert to a path.
Then I tried to reproduce the error and I create a new svg document with Inkscape and I draw anything, like a "p" converted to a path. It works well in all browsers.
If I open the wrong svg with a code editor this is what I see:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="180"
height="180"
viewBox="0 0 47.625001 47.625001"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="p.svg"
enable-background="new"
inkscape:export-filename="/Users/narcis/Dropbox/feines/business/projectes/want/want-web/want-parts/svg/p.png"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300">
<defs
id="defs2">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter853">
<feBlend
inkscape:collect="always"
mode="color-burn"
in2="BackgroundImage"
id="feBlend855" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="90"
inkscape:cy="90"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
showguides="false"
inkscape:guide-bbox="true"
inkscape:window-width="1592"
inkscape:window-height="915"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="0"
units="px" />
<metadata
id="metadata5">
<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
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-249.37498)"
style="filter:url(#filter853);opacity:1">
<path
inkscape:connector-curvature="0"
id="path818"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;line-height:125.99999905%;font-family:futura;-inkscape-font-specification:'futura Bold';letter-spacing:0px;word-spacing:0px;fill:#020202;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 27.693056,269.00706 q 0,-0.84667 -0.3175,-1.5875 -0.282222,-0.77611 -0.846667,-1.34056 -0.564444,-0.56444 -1.340556,-0.88194 -0.740833,-0.35277 -1.622777,-0.35277 -0.846667,0 -1.5875,0.31749 -0.740834,0.3175 -1.305278,0.88194 -0.529167,0.56446 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84667 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305278,0.88194 0.776111,0.3175 1.622777,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.270001,-0.88194 0.564444,-0.56445 0.881944,-1.30528 0.352778,-0.74083 0.352778,-1.55222 z M 19.649722,287.034 h -6.385278 v -27.12861 h 6.385278 v 2.01083 q 2.046111,-2.57527 5.573889,-2.57527 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234723,1.30527 1.905,3.06916 0.705556,1.76388 0.705556,3.77472 0,2.01083 -0.705556,3.73945 -0.670277,1.72861 -1.905,3.03388 -1.199444,1.30528 -2.8575,2.04611 -1.658055,0.74084 -3.598333,0.74084 -3.386667,0 -5.644445,-2.32834 z" />
</g>
</svg>
Here is the code of the file that I reproduced and works well in all browsers:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="180"
height="180"
viewBox="0 0 47.624999 47.625001"
version="1.1"
id="svg4510"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="p-be.svg">
<defs
id="defs4504" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-50.54196"
inkscape:cy="90"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1035"
inkscape:window-x="67"
inkscape:window-y="36"
inkscape:window-maximized="0" />
<metadata
id="metadata4507">
<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
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-249.37498)">
<g
aria-label="p"
style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="text5057">
<path
d="m 27.693056,269.00707 q 0,-0.84667 -0.3175,-1.5875 -0.282223,-0.77612 -0.846667,-1.34056 -0.564445,-0.56444 -1.340556,-0.88194 -0.740833,-0.35278 -1.622777,-0.35278 -0.846667,0 -1.587501,0.3175 -0.740833,0.3175 -1.305277,0.88194 -0.529167,0.56445 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84666 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305277,0.88194 0.776112,0.3175 1.622778,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.27,-0.88194 0.564445,-0.56445 0.881945,-1.30528 0.352778,-0.74084 0.352778,-1.55222 z m -8.043334,18.02694 H 13.264444 V 259.9054 h 6.385278 v 2.01083 q 2.046111,-2.57528 5.573889,-2.57528 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234722,1.30527 1.905,3.06916 0.705556,1.76389 0.705556,3.77473 0,2.01083 -0.705556,3.73944 -0.670278,1.72861 -1.905,3.03389 -1.199444,1.30528 -2.8575,2.04611 -1.658056,0.74083 -3.598333,0.74083 -3.386667,0 -5.644445,-2.32833 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;font-family:Futura;-inkscape-font-specification:'Futura Bold';stroke-width:0.26458332px"
id="path814" />
</g>
</g>
</svg>
I know nothing about svg code. Can anyone tell me what's wrong and why that svg has problems with Safari and Firefox?
You are using a filter that contains the primitive
<feBlend in2="BackgroundImage" mode="color-burn" />
The Blend mode color-burn has been part of Inkscape for some time, but it is not defined in the SVG 1.1 specification. For the SVG 2 spec, filter effects have been moved to CSS Filter Effects. The blend mode is defined there, but not yet implemented by all browsers.
But that is a secondary problem. The main issue is the attempt to use a background image as a source for blending. I am not aware of this working anywhere yet. Currently, filters only support the use of the source graphic, its transparency, fill or stroke as input.
If you want to use anything but the source graphic as an input to compositing, you'll have to import it via an <feImage> filter primitive as described here.
What you probably did in Inkscape to introduce that filter was to open the Layer->Layers... editor and select Blend mode: "Coror burn". Select "Normal" to delete the filter. No other selection will work outside of Inkscape.

Why will browsers not display my SVG polygon?

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.

SVG rotate deletes Elements

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 ).

Resources