svg-net/svg

Fork of the ms svg library

SVG.NET

Public fork of the C# SVG rendering library on CodePlex.

This started out as a private fork by vvvv with some minor modification to enable the writing of proper SVG strings. After almost two years of fixes and improvements the company decided to share the codebase with the public in order to improve it even further. In 2021, the repository has been transferred from the company organization vvvv to the new organization svg-net (e.g. SVG.NET).

Contributing

This project is in need of contributors. Assistance in areas such as code reviews and testing is particularly needed. If you can contribute, your help would be invaluable. For those interested in leading or contributing to specific initiatives like the codebase segmentation, please let us know.

Please feel free to fork the repository and open pull requests for any fix, improvement or feature you want to add. You may check the contributing guide for more information on how to do this.

Documentation

For information on installation and usage of the library, and for release notes please check the documentation pages. Note that the documentation is incomplete - any help to improve it is greatly appreciated!

Projects using the library

• vvvv a hybrid visual/textual live-programming environment for easy prototyping and development.
• Posh a windowing/interaction/drawing layer for C#/.NET desktop applications with their GUI in a browser.
• Timeliner a Posh based timeline that can be controlled by and sends out its values via OSC.
• Chordious a fretboard diagram generator for fretted stringed instruments.
• HttpMaster a Windows tool for HTTP testing and debugging.

If you want your project in this list, send a pull request on this file, or a link and short description to tebjan (at) vvvv.org.

License

Licensed under the MS-PL license.

This project has dependencies on other open-source projects. These projects are referenced via NuGet packages and might be subject to different licenses.

Project	Author	Sources	License
ExCSS	Tyler Brinks (@tylerbrinks)	GitHub	MIT

svg's Issues

Error in SvgDocument.Draw(), if SVG-file contains line with arrow

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

Is "symbol" element don't recognized?

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

Bug that results in a wrong path position if a path contains a relative position after a close path segment (z)

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;

Observation/Question About ids in Elements

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

Objects sometimes misaligned in rendered SVG.

Sometimes when rendering charts from highcharts, elements from highcharts' SVG are rendered in the wrong position.

When the SVG is rendered in browser, everything appears to be in the correct position, but once rendered with SVG.NET, items will sometimes be misaligned as per the following image:

BUG: SVG images with Gradients are not rendered correctly

SVG images with gradients are not rendered correctly.

You can download the balloons.svg file from this fiddle:
http://jsfiddle.net/EmanueleS/d2VzQ/

Text is not rendered when using style="font: ... "

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

Which version of the libary are you guys using for your samples? Object null exception

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.

Background color

Am I missing something. The background color of the chart is different.

Chart - Screen Capture

Chart - SVG conversion to PNG

Thanks for the great work on keeping this code up to date!!!

rename: ..FixID to ForceUniqueID

SvgColourServer with translucent color?

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!

Issue with Wrapped text

Hi

I am using SVG.dll to convert HighCharts chart.getSVG() string in to a png image. I have an issue with X Axis Labels not wrapping in turn cropping them. Please see the attached image.

Any help would be appreciated.

Thanks
Kalyan

Text elements produce : {"A generic error occurred in GDI+."}

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>

Filters (e.g. Gaussian blur) do not work

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.

Library is not CLS Complient (patch included)

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

SvgLine should not generate Fill attribute by GETXml() call.

This is the return data.

Although Fill cannot be set in SvgLine now, the GetXML is still trying to generate it.

New NuGet package

Would it be possible to create a new NuGet package. As the current package 1.0.2 is not suitable for web applications.

Call Path in a SVG with an empty content element causes an InvalidArgumentException

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.

image line quality issue and could not render text

Hi, I tried to use your library to render a svg file and convert o png image on fly, however the text was not rendered and the line quality also suffers.

Below is svg file.

O N N N CH 3

Error in SvgDocument.Open(XmlDocument document)

When try to open XmlDocument, which contains non-latin symbol, raise an error "An invalid character for the specified encoding". When open the same XML-file directly by SvgDocument.Open(string filename) all is fine.

add modifier keys to mouseEvents

When graph's title has multiple lines of text or graph contains sub-title, only the first line of the title is displayed

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

Text Not Rendering When Converting to PNG

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>

The final result looks like

The browser is rendering

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);
}

SvgDocument.Open fails returning null sometimes when used by multiple threads

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.

Stack overflow in SvgPolyline.cs

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;
       }
   }
  

  }

SvgExtensions.GetXml(SvgDocument) return bad xml

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

Inverse gradient

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>

this is how it should look:

and this is how it looks after converting to an image with your tool:

any help? thanks in advance

data-uri schemes do not support SVG data-uris

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.

Problem with empty stroke element

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>

Error when render node "text" with nested node "tspan"

If SVG-node "text" contains more then 1 node "tspan", the rendered text is overlayed. In the sample the result text must be "E1/1".

Draw doesn't show SvgText elements

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

}

The "stroke-dasharray" attribute appears to be ignored

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?

Aspect ratios not rendering properly using SvgDocument.Draw();

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.

Null Reference When Drawing an SVG USE Element

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!

SvgImage.cs completion

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.

preserveAspectRatio values are case-sensitive

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?

https://github.com/vvvv/SVG/blob/ebba7b35c2279d4d83fa28dbfee7a5c9fe2b506f/Source/Painting/EnumConverters.cs#L112

Some observations I made

First of all, thanks for all the improvements :)

1. When I have multiple layers within an SVG created with Inkscape, the text layers are not rendered when using svgDoc.Draw() (Talking about text within a layer). I have to add this text manually, adding new SVG-Documents. If I have just one layer and within that layer a rectangle for example, it works.
2. If I try to assign base64 encoded images to an SvgImage.Href, that is not possible, because the Uri class does accept URI's only to a specific length. If there is any other way to accomplish that, please let me know. (I thought about to read the xml of the svg and replace the content manually)

builds for .NET3.5 : Facing error in svgDocument.Draw()

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?

Nuget package is not signed (no strong name key file applied to DLL)

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.

Nuget package

Hi,

it would be great if you could create a nuget package.

https://nuget.org/

Kind regards
Marcell

SVG with linked images?

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?

Creating and writing to a custom attribute

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.

Support for "display=none"

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.

Exported Bitmap ends up with a Fill when it shouldn't have a Fill.

I've fully documented the issue here:

http://stackoverflow.com/questions/19330573/converting-svg-to-png-image-without-line-fill

Paths closing

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"/>

Duplicate ID prevents element from being rendered.

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.

Exception: Font cannot be found.

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);
    }

Caught an exception:

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
        {

        }
    }

Null reference exception in Draw function.

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?

SVG.dll (Version: 1.5.1.27985) Not Compatible on Dot Net Framework 3.5

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.

Colour attribute none and None are treated differently

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