Here are 4 short, self-contained C# examples for creating data-driven graphics. These cover raster (pixels), vector (SVG code), and vector templates (modifying Illustrator/Inkscape files).

Prerequisites:

• System.Drawing: Requires System.Drawing.Common NuGet.
• SkiaSharp: Requires SkiaSharp NuGet (Cross-platform standard).
• XML/SVG: Uses standard .NET libraries (System.Xml.Linq).

1. The Raster "Badge" (System.Drawing)

Technique: Loads a PNG template, draws dynamic text and overlays a user avatar image. Best for generating social media cards or ID badges.

File: BadgeGenerator.cs

using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Text;

public void GenerateBadge(string userName, string role, string avatarPath, string templatePath)
{
    // 1. Load the Base Template
    using (Bitmap bitmap = (Bitmap)Image.FromFile(templatePath))
    using (Graphics g = Graphics.FromImage(bitmap))
    {
        // High quality settings for text
        g.SmoothingMode = SmoothingMode.AntiAlias;
        g.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;

        // 2. Load and Draw User Avatar (Circular or placed at specific coords)
        using (Image avatar = Image.FromFile(avatarPath))
        {
            // Draw avatar at x=50, y=50, width=100, height=100
            g.DrawImage(avatar, new Rectangle(50, 50, 100, 100));
        }

        // 3. Draw Data-Driven Text
        using (Font nameFont = new Font("Arial", 24, FontStyle.Bold))
        using (Font roleFont = new Font("Arial", 14, FontStyle.Regular))
        using (Brush textBrush = new SolidBrush(Color.White))
        {
            // Name
            g.DrawString(userName, nameFont, textBrush, new PointF(170, 60));
            // Role
            g.DrawString(role.ToUpper(), roleFont, textBrush, new PointF(170, 95));
        }

        // 4. Save result
        bitmap.Save("output_badge.png", System.Drawing.Imaging.ImageFormat.Png);
    }
}

2. SVG "From Scratch" (The Normal Way)

Technique: Building an SVG purely via XML construction. This is ideal for simple data visualizations, bar charts, or dynamic icons where you don't need a complex artistic background.

File: SimpleSvgBuilder.cs

using System.Xml.Linq;

public void CreateVectorChart(string productName, int salesCount)
{
    // XML Namespace for SVG
    XNamespace svg = "<http://www.w3.org/2000/svg>";

    // 1. Define the Root Element
    var doc = new XElement(svg + "svg",
        new XAttribute("width", "400"),
        new XAttribute("height", "200"),
        new XAttribute("xmlns", svg),
        
        // 2. Add Background
        new XElement(svg + "rect",
            new XAttribute("width", "100%"),
            new XAttribute("height", "100%"),
            new XAttribute("fill", "#f4f4f4")
        ),

        // 3. Add Data-Driven Text
        new XElement(svg + "text",
            new XAttribute("x", "20"),
            new XAttribute("y", "40"),
            new XAttribute("font-family", "Verdana"),
            new XAttribute("font-size", "20"),
            new XAttribute("fill", "black"),
            $"Sales Report: {productName}"
        ),

        // 4. Add Data-Driven Visual (Bar)
        new XElement(svg + "rect",
            new XAttribute("x", "20"),
            new XAttribute("y", "60"),
            new XAttribute("width", salesCount * 2), // Scale variable
            new XAttribute("height", "30"),
            new XAttribute("fill", "#007acc")
        )
    );

    doc.Save("chart_output.svg");
}

3. SVG "Designer Template" (Inkscape/Illustrator)

Technique: You design a complex graphic in Illustrator or Inkscape. You assign Object IDs to specific text or shapes (e.g., calling a text box lbl_title or a rectangle rect_bg). The code simply finds those IDs and updates them.

File: SvgTemplateProcessor.cs

using System.Xml.Linq;
using System.Linq;

public void ProcessTemplate(string templatePath, string newTitle, string newColorHex)
{
    // 1. Load the SVG created in Inkscape/Illustrator
    XDocument doc = XDocument.Load(templatePath);
    XNamespace svg = "<http://www.w3.org/2000/svg>";

    // 2. Update Text: Find element where ID = 'lbl_title'
    // Note: Illustrator often nests IDs; searching descendants is safer
    var titleElement = doc.Descendants(svg + "text")
                          .FirstOrDefault(x => (string)x.Attribute("id") == "lbl_title");

    if (titleElement != null)
    {
        // SVG text content is often inside a <tspan>, but simplified here:
        titleElement.Value = newTitle; 
    }

    // 3. Update Graphics: Find element where ID = 'dynamic_box'
    var boxElement = doc.Descendants(svg + "rect")
                        .FirstOrDefault(x => (string)x.Attribute("id") == "dynamic_box");

    if (boxElement != null)
    {
        // Change the fill color based on data
        boxElement.SetAttributeValue("fill", newColorHex);
    }

    // 4. Update Image: Find image by ID and swap the href
    var imgElement = doc.Descendants(svg + "image")
                        .FirstOrDefault(x => (string)x.Attribute("id") == "user_photo");
                        
    if (imgElement != null)
    {
        // Set new image URL or Base64 string
        XNamespace xlink = "<http://www.w3.org/1999/xlink>";
        imgElement.SetAttributeValue(xlink + "href", "<https://example.com/new-user.jpg>");
    }

    doc.Save("processed_template.svg");
}