svg-net / svg Goto Github PK
View Code? Open in Web Editor NEWFork of the ms svg library
Home Page: http://svg-net.github.io/SVG/
License: Microsoft Public License
Fork of the ms svg library
Home Page: http://svg-net.github.io/SVG/
License: Microsoft Public License
Hi.
I just had a stack overflow using this so I downloaded the source and fixed it. I can't see how to attach the diff file so here it is.
Regards.
Source/Basic Shapes/SvgPolyline.cs | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/Source/Basic Shapes/SvgPolyline.cs b/Source/Basic Shapes/SvgPolyline.cs
index c645656..dd9d705 100644
--- a/Source/Basic Shapes/SvgPolyline.cs
+++ b/Source/Basic Shapes/SvgPolyline.cs
@@ -13,13 +13,14 @@ namespace Svg
[SvgElement("polyline")]
public class SvgPolyline : SvgPolygon
{
private GraphicsPath _Path;
public override GraphicsPath Path
{
get
{
if (Path == null || this.IsPathDirty)
if (_Path == null || this.IsPathDirty)
{
Path = new GraphicsPath();
_Path = new GraphicsPath();
try
{
@@ -28,13 +29,13 @@ namespace Svg
PointF endPoint = new PointF(Points[i].ToDeviceValue(this), Points[i + 1].ToDeviceValue(this));
// TODO: Remove unrequired first line
if (Path.PointCount == 0)
if (_Path.PointCount == 0)
{
Path.AddLine(endPoint, endPoint);
_Path.AddLine(endPoint, endPoint);
}
else
{
Path.AddLine(Path.GetLastPoint(), endPoint);
_Path.AddLine(_Path.GetLastPoint(), endPoint);
}
}
}
@@ -44,7 +45,7 @@ namespace Svg
}
this.IsPathDirty = false;
}
return Path;
return _Path;
}
}
}
SVG images with gradients are not rendered correctly.
You can download the balloons.svg file from this fiddle:
http://jsfiddle.net/EmanueleS/d2VzQ/
SVG has a display="none"
attribute that is supposed to set the element (graphic layer, basic shape, etc.) to Visible=false
:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display
I guess folks use these layers in Adobe to do things like setting up a reference frame for their symbols - the set I was using had this in most of the symbols. e.g. <g id="my-reference-frame-layer" display="none">
NOTE: I'm going to do a pull request for this now, just wanted to have an issue to attach to.
Creating an SvgDocument from the following SVG:
<!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="100px" height="100px" overflow="auto" preserveAspectRatio="none" id="svg">
<circle cx="10" cy="10" r="10" fill="Red" />
</svg>
Using SvgeDocument.GetXML() will then return the following:
<!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="100px" height="100px" overflow="auto" preserveAspectRatio="none" id="svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle cx="10" cy="10" r="10" fill="Red" />
</svg>
This adds "xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1"" in the end which duplicates attributes version and xmlns. This makes it impossible to use in an create and other svgDocument from that xml.
Right now I use an really ugly wrapper as qiuckfix for this error:
public static string ToXML(this SvgDocument document)
{
//Get XML
var xml = document.GetXML();
//Remove double xmlns and verision
xml =
xml.Replace(
"xmlns=\"http://www.w3.org/2000/svg\" xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\">", ">");
return xml;
}
I hope that you can fix this error :)
Best regards,
/David
This is the return data.
Although Fill cannot be set in SvgLine now, the GetXML is still trying to generate it.
Hi, i can't get text-nodes rendered.
I use KendoChart to create my SVG-file.The textnodes from KendoChart looks like this:
< text x="94" y="30" fill-opacity="1" style="font: 16px Arial,Helvetica,sans-serif; " fill="#8e8e8e">Header
The problem is the style attribute (style="font: 16px Arial,Helvetica,sans-serif; ").
If i change the node to the following line it works.
< text x="94" y="30" fill-opacity="1" font-family="Arial" font-size="16px" fill="#8e8e8e">Header
Also you can't use more then one font... ie (font-family="Arial,Helvetica,sans-serif") does not work.
Got some ideas?
Thanks in Advance!
/Johan
hi
there is a problem with gradients. it seems that they are inversed. please take a look at this sample:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="490" version="1.1" width="700" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
<defs>
<radialGradient id="hereitis" gradientUnits="userSpaceOnUse" r="186" cx="350" cy="261" fx="350" fy="261">
<stop offset="20%" stop-color="#99beeb" stop-opacity="1"></stop>
<stop offset="120%" stop-color="#4373af" stop-opacity="1"></stop>
</radialGradient>
</defs>
<g class="red-dataset-9">
<path fill="url(#hereitis)"
stroke="#d5e4f7"
d="M349.9999999999997,75A186,186,0,0,1,442.9999999999998,99.9192748960943L350,261Z"
stroke-width="1"
stroke-linejoin="round"
stroke-opacity="0.8"
opacity="1"
fill-opacity="1"
style="stroke-linejoin: round; opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
<text x="419.7871994186818" y="44.63261491124857" text-anchor="start" stroke="none" fill="#60634e" font-family="Verdana" font-size="13px" style="text-anchor: start; font-family: verdana; font-size: 13px;">
<tspan dy="4.999802411248567" x="419.7871994186818">januar: 12</tspan>
</text>
<path fill="none" stroke="#d8dcc5" d="M403.3167232911188,62.01927978445181L409.7871994186818,44.63261491124857L414.7871994186818,44.63261491124857" stroke-width="0.7" stroke-opacity="1" style=""></path>
</g>
</svg>
and this is how it looks after converting to an image with your tool:
any help? thanks in advance
First of all, thanks for all the improvements :)
The nugget published DLL's should have a strong name.
Unable to compile with projects that are signed. Therefore you should sign your DLL so they can be references in other projects that are signed with a strong name / key.
With the following extract from an svg file. When the third line element has an id in it, it fails to render. If I manually remove id="main" from that element it will render/draw. Where in the source is that exclusion made? I am drawing to a Bitmap.
Is it an svg syntax error to have an id like this inside an element? I did not create this svg. It was provided to me.
Thanks
I am attempting to convert the following SVG to PNG:
<svg width="520" height="520">
<g transform="translate(260,260)">
<path d="M1.5919882599690904e-14,-260A260,260 0 0,1 255.63015160787077,-47.468153418234024L0,0Z" style="fill: #3b6c9e; stroke: #000000;"/>
<text transform="translate(83.1100776916217,-99.96356829411707) rotate(-50.25974025974026)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Customer Retention</text>
</g><g transform="translate(260,260)">
<path d="M255.63015160787077,-47.468153418234024A260,260 0 0,1 181.96298919332605,185.71340975769496L0,0Z" style="fill: #6ea45a; stroke: #000000;"/>
<text transform="translate(123.96103175026059,39.16200463984046) rotate(17.532467532467535)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Direct</text>
</g><g transform="translate(260,260)">
<path d="M181.96298919332605,185.71340975769496A260,260 0 0,1 -253.48125716727415,57.85544282864177L0,0Z" style="fill: #edb04d; stroke: #000000;"/>
<text transform="translate(-36.62523238938583,124.73408656988467) rotate(-73.63636363636365)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Customer Acquisition</text>
</g><g transform="translate(260,260)">
<path d="M-253.48125716727415,57.85544282864177A260,260 0 0,1 -122.27069581811172,-229.45560996444345L0,0Z" style="fill: #ca423e; stroke: #000000;"/>
<text transform="translate(-118.25215939608741,-54.003951690245195) rotate(24.54545454545456)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Revenue Split</text>
</g><g transform="translate(260,260)">
<path d="M-122.27069581811172,-229.45560996444345A260,260 0 0,1 -21.192413722236722,-259.13487144849023L0,0Z" style="fill: #83528c; stroke: #000000;"/>
<text transform="translate(-36.62523238938597,-124.73408656988462) rotate(73.63636363636357)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Cost Reduction</text>
</g><g transform="translate(260,260)">
<path d="M-21.192413722236722,-259.13487144849023A260,260 0 0,1 -2.7868603692110527e-13,-260L0,0Z" style="fill: #8f9291; stroke: #000000;"/>
<text transform="translate(-5.302516188006211,-129.89181391479576) rotate(87.66233766233762)" style="fill: #ffffff; font-family: Arial; font-weight: bold; font-size: 16px; text-anchor: middle;">Ad-funded</text>
</g>
</svg>
You can see that only one of the text nodes is visible and it is not positioned correctly. I have other charts using text nodes that are being rendered correctly. This is my first serious foray into svg, so right now I'm just trying to narrow down whether this is a problem with the SVG tool, or if my above markup has issues. It is being generated with d3.
The actual server-side code doing the conversion is
var tempFileName = Path.GetTempFileName();
var byteArray = Encoding.ASCII.GetBytes(svgFileContents);
using (var stream = new MemoryStream(byteArray))
{
var svgDocument = SvgDocument.Open(stream);
var bitmap = svgDocument.Draw();
bitmap.Save(tempFileName, ImageFormat.Png);
}
Would it be possible to create a new NuGet package. As the current package 1.0.2 is not suitable for web applications.
I've tried the following SVG and method to save SVG:
SVG:
http://pastebin.com/e33NifnQ
Method:
public void SaveSvg(string svg)
{
XmlDocument xd = new XmlDocument();
xd.XmlResolver = null;
xd.LoadXml(svg);
var svgGraph = Svg.SvgDocument.Open(xd);
svgGraph.Draw().Save(@"c:\\test.png", System.Drawing.Imaging.ImageFormat.Png);
}
I know this issues is similar to #25 but I don't think it is the same. I am trying to render the SVG from a Google Chart to image and the line charts always close and fill:
I am using version 1.5.0 off nuget. Here is part of the svg that is being rendered to create the line:
< path d="M61.13636363636364,99.91999999999999C61.13636363636364,99.91999999999999,88.65151515151516,74.14333333333332,102.4090909090909,72.74999999999997C116.16666666666667,71.35666666666665,129.92424242424244,87.03166666666664,143.6818181818182,91.56C157.43939393939394,96.08833333333334,171.1969696969697,97.48166666666665,184.95454545454547,99.91999999999999C198.71212121212122,102.35833333333333,212.46969696969694,98.875,226.22727272727272,106.19C239.98484848484847,113.50499999999998,253.74242424242425,144.15833333333333,267.5,143.81C281.25757575757575,143.46166666666664,295.0151515151515,92.25666666666663,308.77272727272725,104.1C322.530303030303,115.94333333333333,336.2878787878788,207.90333333333334,350.04545454545456,214.87C363.8030303030303,221.83666666666667,377.5606060606061,152.86666666666667,391.3181818181818,145.89999999999998C405.0757575757576,138.93333333333334,418.8333333333333,175.50833333333333,432.5909090909091,173.07C446.3484848484849,170.63166666666666,473.8636363636364,131.26999999999998,473.8636363636364,131.26999999999998" stroke="#6b8f00" stroke-width="2" fill-opacity="1" fill="none"/>
I have a requirement where I need to write values to custom attributes
For e.g.
<text AB:CDEF="Value"> </text>
where AB:CDEF is the custom attribute.
I haven't started using the library yet however I would like to know the capability before I make a decision to use this library for my project.
I've fully documented the issue here:
http://stackoverflow.com/questions/19330573/converting-svg-to-png-image-without-line-fill
at Svg.SvgElementIdManager.GetElementById(Uri uri) in c:\Dev\vvvv\SVG\Source\SvgElementIdManager.cs:line 42
at Svg.SvgUse.Render(SvgRenderer renderer) in c:\Dev\vvvv\SVG\Source\Document Structure\SvgUse.cs:line 85
at Svg.SvgElement.RenderChildren(SvgRenderer renderer) in c:\Dev\vvvv\SVG\Source\SvgElement.cs:line 572
at Svg.SvgElement.Render(SvgRenderer renderer) in c:\Dev\vvvv\SVG\Source\SvgElement.cs:line 560
at Svg.SvgDocument.Draw(Bitmap bitmap) in c:\Dev\vvvv\SVG\Source\SvgDocument.cs:line 386
at Svg.SvgDocument.Draw() in c:\Dev\vvvv\SVG\Source\SvgDocument.cs:line 359
at IconBuilder.IconBuilderControl.LoadImages() in k:\src.lukasz.czygier\WMD\WMD\IconBuilder\IconBuilderControl.cs:line 142
at IconBuilder.IconBuilderControl..ctor() in k:\src.lukasz.czygier\WMD\WMD\IconBuilder\IconBuilderControl.cs:line 75
at ControlTestApp.Icons.InitializeComponent() in c:\Users\luczpl\Documents\Visual Studio 2012\Projects\ControlTestApp\ControlTestApp\Form1.Designer.cs:line 43
at ControlTestApp.Icons..ctor() in c:\Users\luczpl\Documents\Visual Studio 2012\Projects\ControlTestApp\ControlTestApp\Form1.cs:line 18
at ControlTestApp.Program.Main() in c:\Users\luczpl\Documents\Visual Studio 2012\Projects\ControlTestApp\ControlTestApp\Program.cs:line 19
at System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
at System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.ThreadHelper.ThreadStart()
Having problems with drawing some SVG's. Can I send them to test?
I'm setting SVG document's preserveAspectRatio
property. When loading the image in Chrome, it appears to be scaled correctly, according to the given aspect ratio setting. However, I see the follow error in the console:
Error: Invalid value for <svg> attribute preserveAspectRatio="xmidymid"
The SVG spec gives attributes in mixed case form, not lower case. For example: xMidYMid
instead of xmidymid
.
http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute
It looks like the base class of SvgPreserverAspectRatioConverter
is converting all enum values to lower case. So maybe could override ConvertTo
and avoid the ToLower
call?
The presence of a duplicate id prevents that item from being rendered. I understand that this is a problem with the SVG itself, but browsers ignore duplicate ids and render the path regardless. Shouldn't this do the same?
I think AddAndForceUniqueID(item, false, false); hardcoded to false is the cause of this.
This assembly is not CLS compliant, which has issues for other CLS compliant applications that want to make use of it.
Fortunately it is not a huge amount of work to make it CLS compliant, and in fact I did just that in about 30 minutes. A GIT patch file with those changes is available on https://dl.dropboxusercontent.com/u/118904/patch_for_cls_compliance.patch
Just a note - if you apply the patch, I removed the project setting to generate an XML documentation file (Project settings - Build - XML Documentation file) - since there are quite a bit of errors in the XML documentation that showed up when I added CLSCompliant(true) attribute to AssemblyInfo
If you set the SvgDocument to have a non-square aspect ratio, .Draw() will skew the rendered bitmap, even if you set .AspectRatio.Align = SvgPreserveAspectRatio.XMidYMin;
The generated SVG XML will render correctly when opened in inkscape and chrome.
To reproduce change the width specified in SVG/Samples/XMLOutput/Form1.cs:27 to 250 and compare the rendered SVG on the form with how the XML renders in chrome/ inkscape.
When graph's title has multiple lines of text or graph contains sub-title, only the first line of the title is displayed in the generated image file.
SVG string: https://www.dropbox.com/s/55wde9einohm08r/chart.svg
Through troubleshooting pattern images not showing up, I've found that SvgImage.cs appears to be incomplete. I'm attempting to complete this class and would like to ask for any suggestions or even a dev copy, if one exists. Here's a simplified example showing the image pattern that I'm attempting to render. Thanks for any assistance, Nate.
http://naxtell.com/test-waves.svg
Edit: Replaced svg code with link to my svg file.
I have this SVG code:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40px" height="40px" overflow="auto" viewBox="0, 0, 40, 40" preserveAspectRatio="none" id="Livello_1">
<defs>
<symbol id="clip" viewBox="0, 0, 40, 40">
<polygon points="36.534 16.666 20.083 5.072 3.525 16.666 4.475 18.288 20.029 7.444 35.585 18.288 " fill="White" xmlns="http://www.w3.org/2000/svg" />
<g xmlns="http://www.w3.org/2000/svg">
<path d="M13.352 32.266 L13.352 15.147 L16.809 15.147 L16.809 21.885 L23.583 21.885 L23.583 15.147 L27.038 15.147 L27.038 32.266 L23.583 32.266 L23.583 24.782 L16.809 24.782 L16.809 32.266 L13.352 32.266 z" pathLength="0" fill="White" />
</g>
</symbol>
</defs>
<path d="M40 34 C40 37.313 37.313 40 34 40 L6 40 C2.687 40 0 37.313 0 34 L0 6 C0 2.687 2.687 0 6 0 L34 0 C37.313 0 40 2.687 40 6 L40 34 z" pathLength="0" fill="#D28700" />
<use xlink:href="#clip" x="0%" y="0%" width="100%" height="100%" />
</svg>
When I create SvgDocument then write SVG file, I obtain new SVG without symbol
tag. It is replaced with her children. Relative use
tag disappear too.
This is the result:
<!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="40px" height="40px" overflow="auto" viewBox="0, 0, 40, 40" preserveAspectRatio="none" id="Livello_1">
<defs>
<polygon points="36.534 16.666 20.083 5.072 3.525 16.666 4.475 18.288 20.029 7.444 35.585 18.288 " fill="White" />
<g>
<path d="M13.352 32.266 L13.352 15.147 L16.809 15.147 L16.809 21.885 L23.583 21.885 L23.583 15.147 L27.038 15.147 L27.038 32.266 L23.583 32.266 L23.583 24.782 L16.809 24.782 L16.809 32.266 L13.352 32.266 z" pathLength="0" fill="White" />
</g>
</defs>
</svg>
What's happens? Is SVG.dll not compatible with symbol
element?
Thanks
A "path" SVG element has a stroke-dasharray="10" attribute, but there is a solid line in a result image. Please clarify is it a bug or just not supported?
I am trying to use this library to to take a SVG, and generate a rasterized image from it. My SVG files have images (linked to using absolute URLs) and text.
When I use the library to try to create/save the rasterized image, none of the SVG's linked images are rendered. On CodePlex, this issue is mentioned in the "Discussion" tab by some other users.
Are embedded images able to be rendered?
Alright my issue is when there is a SvgUse element inside of an SvgDocument and you try to draw a Bitmap you get a null reference exception in the following method in SvgElement.cs This is very similar to issue #64 in this repo.
protected virtual void RenderChildren(SvgRenderer renderer)
{
foreach (SvgElement element in this.Children)
{
element.Render(renderer);
}
}
Here's some example code below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" width="768" height="1024">
<defs>
<rect x="22.85714" y="62.36218" width="464.2857" height="274.2857" fill="#C8B7B7" id="pieChartRect" />
</defs>
<use x="250.7143" y="406.6479" id="usePieChart1" xlink:href="#pieChartRect"/>
</svg>
Now the C# code:
SvgDocument newSVGDoc = SvgDocument.Open("C:\svgDoc.svg");
//get the use element and re-position it.
SvgUse usePieChart1 = newSVGDoc.GetElementById<SvgUse>("usePieChart1");
usePieChart1.X = 40;
usePieChart1.Y = 60;
Some interesting facts are that even though the document has the xmlns:xlink="http://www.w3.org/1999/xlink"
namespace on the svg element the SvgDocument object does not have it in it's CustomAttributes for some reason.
So can someone with more experience with this code base could take a look at the issue. Maybe @tebjan ?
Thanks!
Hi, i'm using Kendo Datawiz to generate charts. One problem is that they include paths with empty stroke attribute (stroke=''). The current version of SVG renders this strokes with default color black.
According to SVG specification i empty attribute is equal to None.
http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
So my question is: Could we treet an empty Stroke attribute as null so these strokes don't get rendered. (SvgPath.cs row 136)
protected internal override void RenderStroke(SvgRenderer renderer)
{
if (this.Stroke != null)
My example svg-file (the strokes don't show if you try some online converters):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="201px" height="191px" style="position: relative; display: block; left: -0.359375px; top: 0px;">
<defs id="k10004"></defs>
<path style="display: block;" d="M0 0 201 0 201 191 0 191 z" stroke="" stroke-width="0" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#ffffff"></path>
<path style="display: block;" d="M5.5 5.5 196.5 5.5 196.5 186.5 5.5 186.5 z" stroke-width="0.1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
<path id="k10005" style="display: block;" data-model-id="k10006" d="M5 5 196 5 196 186 5 186 z" stroke="" stroke-linecap="square" stroke-linejoin="round" fill-opacity="0" stroke-opacity="1" fill="#fff"></path><g id="k10007"></g>
<g>
<path id="k10002" style="display: block;" data-model-id="k10010" d="M 100.5 32.15 A63.35 63.35 0 0,1 163.842 94.515 L 100.5 95.5 z" stroke-width="0.5" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#ffcb05"></path>
<path id="k10009" style="display: block;" data-model-id="k10010" d="M 100.5 32.15 A63.35 63.35 0 0,1 163.842 94.515 L 100.5 95.5 z" stroke-width="0.5" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="none"></path>
</g>
<path style="display: block;" data-model-id="k10010" d="M 100.5 32.15 A63.35 63.35 0 0,1 163.842 94.515 L 100.5 95.5 z" stroke="#fff" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" fill-opacity="0.2" stroke-opacity="0.2" fill="#fff"></path>
</svg>
I implemented an Azure service using your library, you can check out the code here: https://github.com/Injac/AzureBadgeGenerator . I could not replace values and generate images without a object null exception using the latest sources on GitHub. The solution was, to use the binary supplied with your samples. The exception occurs in SVGPath.cs inside the method, indicating that MarkerStart is null. Catching the exception leads to a malformed image.
Please forgive me if this is not an issue but a misunderstanding.
I've opened an SVG and then set all Children (who are ISvgStyleable) to have a fill of 25% transparent black:
private static void RefillSvg(SvgDocument svg, Color color)
{
SvgPaintServer fill = new SvgColourServer
{
Colour = color
};
RefillSvgElements(svg.Children, fill);
}
private static void RefillSvgElements(SvgElementCollection elements, SvgPaintServer fill)
{
elements.OfType<ISvgStylable>().ForEach(o => o.Fill = fill);
foreach (SvgElement element in elements)
RefillSvgElements(element.Children, fill);
}
This is called like this:
RefillSvg(svg, Color.FromArgb((int)(255 * .25f), Color.Black));
The resulting PNG, after saving is completely transparent. E.g.:
private static void Sample()
{
SvgDocument svg = GetSvg();
Bitmap bitmap = new Bitmap((int)svg.Width.Value, (int)svg.Height.Value, PixelFormat.Format32bppArgb);
SvgRenderer svgRenderer = SvgRenderer.FromImage(bitmap);
RefillSvg(svg, Color.FromArgb((int)(255 * .25f), Color.Black));
bitmap.Save(@"C:\Sample.png", ImageFormat.Png);
}
Are alpha channels not supported or am I missing something? Thanks!
SvgGaussianBlur has a bunch of code for computing the gaussian blur of an image, but none of it seems to actually be called. Am I missing something? Cheers.
If SVG-file contains line with arrow (style attribute "marker-end:url(#mrkr13-6);"), raise an exeption in SvgDocument.Draw(): Object reference not set to an instance of the object.
Look like parser can`t to resolve link url(#mrkr13-6).
Hi Tebjan Halm,
Thanks for your Quick Response.
I have downloaded the new version of SVG.DLL but now the code is throwing following error on svgDocument.Draw():
Object reference not set to an instance of an object.
at System.Drawing.Drawing2D.GraphicsPath.AddString(String s, FontFamily family, Int32 style, Single emSize, PointF origin, StringFormat format)
at Svg.SvgText.MeasureString(SvgRenderer renderer, String text, Font font)
at Svg.SvgText.get_Path()
at Svg.SvgVisualElement.Render(SvgRenderer renderer)
at Svg.SvgElement.RenderChildren(SvgRenderer renderer)
at Svg.SvgGroup.Render(SvgRenderer renderer)
at Svg.SvgElement.RenderChildren(SvgRenderer renderer)
at Svg.SvgGroup.Render(SvgRenderer renderer)
at Svg.SvgElement.RenderChildren(SvgRenderer renderer)
at Svg.SvgElement.Render(SvgRenderer renderer)
at Svg.SvgDocument.Draw()
at WebSvcHost.ReportExportHandler.CreateImagesFromSVG(String svgData, List`1 lstPathofImages)
Could you please suggest me the any Solution or Correct Code to draw images to resolve this error?
Download the SVG Master version 1.0.2
Opened the solution and built SVG
Added reference to SVG.dll
Created the method below
Executed the code with the following SVG: http://pastebin.com/e33NifnQ
public void SaveSvg(string svg)
{
XmlDocument xd = new XmlDocument();
xd.XmlResolver = null;
xd.LoadXml(svg);
var svgGraph = Svg.SvgDocument.Open(xd);
svgGraph.Draw().Save(@"c:\\test.png", System.Drawing.Imaging.ImageFormat.Png);
}
It's possible to solve this issue in the following way:
public void SaveSvg(string svg)
{
XmlDocument xd = new XmlDocument();
xd.XmlResolver = null;
xd.LoadXml(svg);
var svgGraph = Svg.SvgDocument.Open(xd);
foreach(var child in svgGraph.Children)
{
SetFont(child);
}
svgGraph.Draw().Save(@"c:\\test.png", System.Drawing.Imaging.ImageFormat.Png);
}
public void SetFont(SvgElement element)
{
foreach(var child in element.Children)
{
SetFont(child); //Call this function again with the child, this will loop
//until the element has no more children
}
try
{
if (element is SvgText)
{
var svgText = (SvgText)element; //try to cast the element as a SvgText
//if it succeeds you can modify the font
svgText.FontFamily = "Arial";
}
}
catch
{
}
}
Commit planetclegg@6f53360 added basic support for data-uri schemes for the image tag. It is also possible for an SVG to be embedded via data-uri as well.
For example, shown both encoded and not encoded (obviously only the encoded version would be valid)
xlink:href='data:image/svg+xml;charset=utf-8,<?xml version='1.0' encoding='UTF-8' ?><svg ...
xlink:href='data:image/svg+xml;charset=utf-8,<?xml version='1.0' encoding='UTF-8' ?><svg ...
This should be functionally the same as specifying a path to an SVG document containing that content.
I am trying to render SVG based text to produce railroad (grammar) diagrams but I get an invalid bitmap back that produces a generic error occurred in GDI+ exception.
MemoryStream s = new MemoryStream(UTF8Encoding.Default.GetBytes(textBox1.Text));
SvgDocument svgDoc = SvgDocument.Open<SvgDocument>(s);
Bitmap bmp = svgDoc.Draw();
I went and just grabbed some SVG simple text examples from w3 to see if it is my code, but same results. All non-text elements seem to work fine and are rendered correctly, but any with 'text' are faulted. I am missing a step? something that needs initialized before using text elements?
A w3 simple example that fails:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
Where I would like to get to:
Rendered via SVG library:
Rendered via various browsers or gnome's rsvg-convert, etc...:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="846" height="68"><defs><style type="text/css">
@namespace "http://www.w3.org/2000/svg";
.line {fill: none; stroke: #332900;}
.bold-line {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2; }
.thin-line {stroke: #1F1800; shape-rendering: crispEdges}
.filled {fill: #332900; stroke: none;}
text.terminal {font-family: Verdana, Sans-serif;
font-size: 12px;
fill: #141000;
font-weight: bold;
}
text.nonterminal {font-family: Verdana, Sans-serif;
font-size: 12px;
fill: #1A1400;
}
text.regexp {font-family: Verdana, Sans-serif;
font-size: 12px;
fill: #1F1800;
}
rect, circle, polygon {fill: #332900; stroke: #332900;}
rect.terminal {fill: #FFDB4D; stroke: #332900;}
rect.nonterminal {fill: #FFEC9E; stroke: #332900;}
rect.text {fill: none; stroke: none;}
polygon.regexp {fill: #FFF4C7; stroke: #332900;}
</style></defs><polygon points="9 33 1 29 1 37"/><polygon points="17 33 9 29 9 37"/><line x1="17" y1="33" x2="19" y2="33" class="line"/><a xlink:href="#Spacing" xlink:title="Spacing"><rect x="31" y="19" width="68" height="32"/><rect x="29" y="17" width="68" height="32" class="nonterminal"/><text class="nonterminal" x="39" y="37">Spacing</text></a><line x1="19" y1="33" x2="29" y2="33" class="line"/><line x1="97" y1="33" x2="107" y2="33" class="line"/><a xlink:href="#PackageDeclaration" xlink:title="PackageDeclaration"><rect x="139" y="19" width="144" height="32"/><rect x="137" y="17" width="144" height="32" class="nonterminal"/><text class="nonterminal" x="147" y="37">PackageDeclaration</text></a><line x1="127" y1="33" x2="137" y2="33" class="line"/><line x1="281" y1="33" x2="291" y2="33" class="line"/><line x1="107" y1="33" x2="127" y2="33" class="line"/><line x1="291" y1="33" x2="311" y2="33" class="line"/><path d="M107 33 Q117 33 117 43" class="line"/><path d="M301 43 Q301 33 311 33" class="line"/><line x1="117" y1="43" x2="117" y2="57" class="line"/><line x1="301" y1="57" x2="301" y2="43" class="line"/><path d="M117 57 Q117 67 127 67" class="line"/><path d="M291 67 Q301 67 301 57" class="line"/><line x1="127" y1="67" x2="137" y2="67" class="line"/><line x1="137" y1="67" x2="291" y2="67" class="line"/><a xlink:href="#ImportDeclaration" xlink:title="ImportDeclaration"><rect x="363" y="19" width="132" height="32"/><rect x="361" y="17" width="132" height="32" class="nonterminal"/><text class="nonterminal" x="371" y="37">ImportDeclaration</text></a><line x1="351" y1="33" x2="361" y2="33" class="line"/><line x1="493" y1="33" x2="503" y2="33" class="line"/><path d="M331 33 L351 33 M350 33 Q341 33 341 23 L341 11 Q341 1 351 1" class="line"/><path d="M503 33 L523 33 M503 33 Q513 33 513 23 L513 11 Q513 1 503 1" class="line"/><line x1="351" y1="1" x2="361" y2="1" class="line"/><line x1="361" y1="1" x2="503" y2="1" class="line"/><line x1="311" y1="33" x2="331" y2="33" class="line"/><line x1="523" y1="33" x2="543" y2="33" class="line"/><path d="M311 33 Q321 33 321 43" class="line"/><path d="M533 43 Q533 33 543 33" class="line"/><line x1="321" y1="43" x2="321" y2="57" class="line"/><line x1="533" y1="57" x2="533" y2="43" class="line"/><path d="M321 57 Q321 67 331 67" class="line"/><path d="M523 67 Q533 67 533 57" class="line"/><line x1="331" y1="67" x2="341" y2="67" class="line"/><line x1="341" y1="67" x2="523" y2="67" class="line"/><a xlink:href="#TypeDeclaration" xlink:title="TypeDeclaration"><rect x="595" y="19" width="120" height="32"/><rect x="593" y="17" width="120" height="32" class="nonterminal"/><text class="nonterminal" x="603" y="37">TypeDeclaration</text></a><line x1="583" y1="33" x2="593" y2="33" class="line"/><line x1="713" y1="33" x2="723" y2="33" class="line"/><path d="M563 33 L583 33 M582 33 Q573 33 573 23 L573 11 Q573 1 583 1" class="line"/><path d="M723 33 L743 33 M723 33 Q733 33 733 23 L733 11 Q733 1 723 1" class="line"/><line x1="583" y1="1" x2="593" y2="1" class="line"/><line x1="593" y1="1" x2="723" y2="1" class="line"/><line x1="543" y1="33" x2="563" y2="33" class="line"/><line x1="743" y1="33" x2="763" y2="33" class="line"/><path d="M543 33 Q553 33 553 43" class="line"/><path d="M753 43 Q753 33 763 33" class="line"/><line x1="553" y1="43" x2="553" y2="57" class="line"/><line x1="753" y1="57" x2="753" y2="43" class="line"/><path d="M553 57 Q553 67 563 67" class="line"/><path d="M743 67 Q753 67 753 57" class="line"/><line x1="563" y1="67" x2="573" y2="67" class="line"/><line x1="573" y1="67" x2="743" y2="67" class="line"/><a xlink:href="#EOT" xlink:title="EOT"><rect x="775" y="19" width="44" height="32"/><rect x="773" y="17" width="44" height="32" class="nonterminal"/><text class="nonterminal" x="783" y="37">EOT</text></a><line x1="763" y1="33" x2="773" y2="33" class="line"/><line x1="817" y1="33" x2="827" y2="33" class="line"/><line x1="830" y1="33" x2="827" y2="33" class="line"/><polygon points="837 33 845 29 845 37"/><polygon points="837 33 829 29 829 37"/></svg>
I am using Svg in a Asp.net Mvc app. Png images are generated via this library from SVG markup. It's a web app, so multiple threads hit the image generation code at the same time.
Sometimes, SvgDocument.Open will return a null even though the svg is valid. Other times it's fine. So not thread safe is my guess.
The problem is in SvgElementFactory.SetPropertyValue where more than one thread may attempt to set the same property value at the same time, attempting to add to _propertyDescriptors just after another thread has already added the dictionary key.
Easy fix is to add [MethodImpl(MethodImplOptions.Synchronized)] on the method.
SvgElementFactory.AvailableElements is also prone to this some problem.
Note: I don't have time to submit a nicely tested fix. My hack is to lock in my own app to avoid the issue. Hope this saves someone time. I will submit a patch if the lock becomes a performance issue for me.
Hi All,
We downloaded the SVG.dll Version: 1.5.1.27985 to resolve few SVG related issues in one of our web application.
Our web application is created in .Net Framework 3.5 and It seems that the new SVG.dll (Version: 1.5.1.27985) is only compatible with .Net Framework 4.0 or Higher.
Can you please provide us or suggest us any other version of same DLL that can work with .Net Framework 3.5 and can resolve our issue like wrap text etc.
When you have an element like SvgText with an empty text in the documento and you call SvdDocument.Path to get the path of the entire document, it throws an InvalidArgumentException.
Here is my fix:
Source/Paths/SvgPathBuilder.cs | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/Source/Paths/SvgPathBuilder.cs b/Source/Paths/SvgPathBuilder.cs
index 32434f9..6b6cfde 100644
--- a/Source/Paths/SvgPathBuilder.cs
+++ b/Source/Paths/SvgPathBuilder.cs
@@ -220,6 +220,10 @@ namespace Svg
{
var lastSegment = segments.Last;
+ // if the last element is a SvgClosePathSegment the position of the previous element should be used because the position of SvgClosePathSegment is 0,0
+ if (lastSegment is SvgClosePathSegment)
+ lastSegment = segments[segments.Count - 2];
+
if (isRelativeX)
{
point.X += lastSegment.End.X;
An attribute 'none' and 'None' in different ways, which for example will cause a fill='none' to fill up with black while a fill='None' will become transparent.
As SvgPaintServerFactory.Create handles the 'none' statement correctly (which SvgPaintServerFactory.ConvertFrom doesn't as it's case sensitive) the solution seems to be to comment out line 52-54 of Source\Painting\SvgPaintServerFactory.cs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.