I am trying to center a linked images, shape, and objects for viewing in a web Browser. I know how to center images, shapes, and objects "Relative to: Page", which will center the item on the page (I think this is the canvas), but this property does not carry over when you view the SVG in a browser capable of viewing SVG files or capable of viewing embedded SVG in an HTML5 (currently using firefox 3.6.3 with HTML5 enabled).
I am sure there is some way I can predict center and then offset the image (meaning it won't be centered in my inkscape canvas, but when it is viewed in the properly sized browser it would be centered, but I DO NOT WANT THIS OPTION. I would like the items to appear at center regardless of what size window one is using to view the svg or embedded SVG in an HTML5 page.
My questions:
Is there a way to specify center (which would mean center for inkscape, and also mean center for any size web browser and scale the image based on the viewport?
Very similarly I would like to know if you can align one image on the left of the viewport (browser window) and a different svg on the right (for that matter top or bottom) (again this would be alignment in the browser and not the alignment in inkscape.)
I have seen this done but I can't figure out how it was done, or what part of the svg tags causes the svg to center. Take a look at this butterfly in a browser that can view svgs http://burningbird.net/svg/butterfly1.svg
So I know it can be done.... I just am not sure what settings to use.
To enable SVG in firefox you need to type about:config in the address bar then enter, then find svg.enable and set it to true.
Centering, an image Releative to Browser View (or Viewport)
Re: Centering, an image Releative to Browser View (or Viewport)
I managed to get several scalable scgs on a page and thought it would be helpful to others to see how I did it.
I looked at the SVG and HTML at Jeff Schiller site http://codedread.com/. He has a nice back ground that demonstrates what I was looking for. I also took a look at Shelley Powers site http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/, which was very helpful
I am still working on Centering an item though. You will see that the below is not center correctly.
Here is the HTML and SVG (just past it to a txt file and name it Test file.htm or something like that)
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
<style type="text/css">
#inner
{
position: relative;
z-index: 1;
width: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 20%; height: 20%; left: 50%; top: 50%;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(1.0339541,0,0,6.043534,3.8553249,-861.39494)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 100%; height: 10%; left: 0%; top: 0%;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(1.0339541,0,0,6.043534,3.8553249,-861.39494)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 100%; height: 10%; left: 0; bottom: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(-1.0339541,0,0,-6.043534,796.14468,1661.3949)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 5%; height: 100%; left: 0; top: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0,-1.0339541,6.043534,0,-861.39494,796.14468)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 5%; height: 100%; right: 0; top: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0,1.0339541,-6.043534,0,1661.3949,3.8553249)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
</body>
I looked at the SVG and HTML at Jeff Schiller site http://codedread.com/. He has a nice back ground that demonstrates what I was looking for. I also took a look at Shelley Powers site http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/, which was very helpful
I am still working on Centering an item though. You will see that the below is not center correctly.
Here is the HTML and SVG (just past it to a txt file and name it Test file.htm or something like that)
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
<style type="text/css">
#inner
{
position: relative;
z-index: 1;
width: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 20%; height: 20%; left: 50%; top: 50%;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(1.0339541,0,0,6.043534,3.8553249,-861.39494)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 100%; height: 10%; left: 0%; top: 0%;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(1.0339541,0,0,6.043534,3.8553249,-861.39494)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 100%; height: 10%; left: 0; bottom: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(-1.0339541,0,0,-6.043534,796.14468,1661.3949)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 5%; height: 100%; left: 0; top: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0,-1.0339541,6.043534,0,-861.39494,796.14468)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
<svg preserveAspectRatio="none" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: fixed; width: 5%; height: 100%; right: 0; top: 0;">
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3755">
<stop
id="stop3757"
style="stop-color:#001ceb;stop-opacity:1"
offset="0" />
<stop
id="stop3759"
style="stop-color:#29eb00;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="372.88135"
y1="80.169495"
x2="374.74576"
y2="212.13008"
id="linearGradient3761"
xlink:href="#linearGradient3755"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3025732e-4,62.362161)" />
<filter
x="-0.035823666"
y="-0.20939183"
width="1.0716473"
height="1.4187837"
color-interpolation-filters="sRGB"
id="filter3787">
<feGaussianBlur
id="feGaussianBlur3789"
stdDeviation="11.549083" />
</filter>
</defs>
<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" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0,1.0339541,-6.043534,0,1661.3949,3.8553249)"
id="layer1">
<rect
width="773.72876"
height="132.37288"
ry="0"
x="-3.7287309"
y="142.53166"
id="rect2985"
style="fill:url(#linearGradient3761);fill-opacity:1;stroke-width:12;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</svg>
</body>
Re: Centering, an image Releative to Browser View (or Viewport)
I managed to get one of the svg positioned / aligned at center. It is not exactly the process I wanted to take so I am still looking for a better solution. Each of the boarders are separate svgs that I created with inkscape (one left, one right, one top, one bottom). I was not sure how to create one svg file and then use it repeatedly for each of the boarders but rotating it so the fade would be oriented correctly. I am sure there is a rotate feature, but the only rotate feature I could find was more geared towards SVG animation (transform:, translate, rotate)
What I did:
In Inkscape: Under document properties:
1. I changed the canvas (paper size) to 800px by 800px (just a random size I decided to use). I wanted the height and with to be the same.
2. I created a box that was 800px by 800px (same size as the paper).
3. Then I put color and used the gradient feature.
4. I made sure that under align distribute, that it was centered vertically, and centered horizontally (so it filled the entire page)
4. I saved it as a plain SVG file and called it top.svg
5. I then used the rotate right feature and then did another save as, but as right.svg (making sure to select plain.scg) (repeated for bottom, and left)
Currently the SVGs are stacked based on the order you stick them into the html file. From the little I looked it seems that Z-index does not work with ordering the svgs, but this may be old info... I saw something that looked like it was being used in a css file for ordering svgs.
I tried to create separate corners so that the fades would look mitered. So I created 8 pcs (each corner got two pcs), and then I held the top, bottom, left, and right, off the corners by the proper percentage. But when I did this the gradients were not showing properly. (if I viewed the SVG file it would look correct, but when I copied the code from svg file to html, it would not render properly.)
What I did:
In Inkscape: Under document properties:
1. I changed the canvas (paper size) to 800px by 800px (just a random size I decided to use). I wanted the height and with to be the same.
2. I created a box that was 800px by 800px (same size as the paper).
3. Then I put color and used the gradient feature.
4. I made sure that under align distribute, that it was centered vertically, and centered horizontally (so it filled the entire page)
4. I saved it as a plain SVG file and called it top.svg
5. I then used the rotate right feature and then did another save as, but as right.svg (making sure to select plain.scg) (repeated for bottom, and left)
Currently the SVGs are stacked based on the order you stick them into the html file. From the little I looked it seems that Z-index does not work with ordering the svgs, but this may be old info... I saw something that looked like it was being used in a css file for ordering svgs.
I tried to create separate corners so that the fades would look mitered. So I created 8 pcs (each corner got two pcs), and then I held the top, bottom, left, and right, off the corners by the proper percentage. But when I did this the gradients were not showing properly. (if I viewed the SVG file it would look correct, but when I copied the code from svg file to html, it would not render properly.)
Re: Centering, an image Releative to Browser View (or Viewport)
In Inkscape 0.48, under save, select "Optimised SVG" then select "Enable Viewboxing".
This will add the needed attribute to the SVG file so that the image can scale with the viewing area instead of using the fixed "SVG px units" for size cues.
Now when viewed on the browser, the Inkscape "page size" will correspond to the browsers area (viewport).
This will add the needed attribute to the SVG file so that the image can scale with the viewing area instead of using the fixed "SVG px units" for size cues.
Now when viewed on the browser, the Inkscape "page size" will correspond to the browsers area (viewport).
Re: Centering, an image Releative to Browser View (or Viewport)
Tomh,
That worked great.
Everything stays to scale, and fills the whole screen. Now I need to get a better handle on the program ( inkscape ) so I can create a nice svg for some backgrounds and web pages. I have seen some of the art work created by other users on the forum and there are some very talented individuals using inkscape.
Thanks again.
That worked great.
Everything stays to scale, and fills the whole screen. Now I need to get a better handle on the program ( inkscape ) so I can create a nice svg for some backgrounds and web pages. I have seen some of the art work created by other users on the forum and there are some very talented individuals using inkscape.
Thanks again.