SVG con immagine all'interno in C# | PNG in formato SVG | JPG nell'SVG

Scalable Vector Graphics (SVG) è un formato immagine potente che può essere utilizzato per creare immagini scalabili di alta qualità per il Web. Le immagini SVG vengono create utilizzando il codice XML, che le rende facili da creare e modificare. In alcuni casi, potrebbe essere necessario incorporare risorse come immagini PNG o JPG all’interno di SVG. In questo post del blog ti mostreremo come creare un SVG con un’immagine all’interno utilizzando C#.

Questo articolo tratta i seguenti argomenti:

  1. API C# per creare SVG con immagine all’interno
  2. Incorpora PNG in SVG
  3. Incorpora SVG all’interno di SVG
  4. Ottieni una licenza gratuita
  5. Risorse didattiche gratuite

API C# per creare SVG con immagine all’interno

Utilizzeremo Aspose.SVG for .NET per creare un SVG con un’immagine all’interno. Consente agli sviluppatori di lavorare con file SVG nelle applicazioni .NET. L’API consente di caricare, analizzare, eseguire il rendering, creare e convertire file SVG in formati popolari senza dipendenze software.

scarica la DLL dell’API o installala utilizzando NuGet.

PM> Install-Package Aspose.SVG

Incorpora PNG in SVG utilizzando C#

Possiamo facilmente incorporare immagini bitmap all’interno di un oggetto SVG utilizzando il file SVG <image> elemento. L'SVG L’elemento è in grado di eseguire il rendering di immagini in vari formati, come JPEG, PNG e persino grafica SVG. Gli attributi del L’elemento ` definisce come deve essere visualizzata la bitmap. Gli attributi principali includono:

  • x e y: indicano le coordinate dell’angolo superiore sinistro dell’immagine.
  • larghezza e altezza: determinano la larghezza e l’altezza della “finestra” in cui verrà visualizzata l’immagine. Entrambi questi attributi sono obbligatori.
  • href e xlink:href: questi attributi puntano all’URL del file immagine.
  • preservaAspectRatio: questo attributo determina il modo in cui l’immagine viene ridimensionata proporzionalmente.

Possiamo facilmente creare un SVG con un PNG all’interno seguendo i passaggi seguenti:

  1. Specifica il contenuto SVG come una stringa.
  2. Successivamente, crea un’istanza della classe SVGDocument dal contenuto della stringa.
  3. Infine, salva l’immagine utilizzando il metodo Save().

L’esempio di codice seguente mostra come incorporare un’immagine PNG all’interno di un file SVG utilizzando C#.

// Specifica il contenuto SVG con l'immagine PNG incorporata.
string content = "<svg height=\"500\" width=\"600\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    " +
                "<circle cx=\"120\" cy=\"100\" r=\"90\" style=\"fill:blue; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7\"  />" +
                "<image href=\"https://www.aspose.cloud/templates/aspose/App_Themes/V3/images/svg/272x272/aspose_svg-for-net.png\" x=\"70\" y=\"50\" height=\"100\" width=\"100\" />\r\n    \t" +
                "<text x=\"40\" y=\"250\">Embedded PNG image</text>\r\n    \t" +
        "</svg>";

// Inizializza un documento SVG utilizzando SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Salva il documento in un file con l'enumerazione SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Incorpora PNG in SVG utilizzando C#

Incorpora PNG in SVG utilizzando C#.

Incorpora SVG all’interno di SVG utilizzando C#

Allo stesso modo, possiamo creare un SVG con un’immagine SVG all’interno seguendo i passaggi menzionati in precedenza.

L’esempio di codice seguente mostra come incorporare un’immagine SVG all’interno di un SVG utilizzando C#.

// Specifica il contenuto SVG con l'immagine SVG incorporata.
string documentContent = "<svg height=\"500\" width=\"500\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t" +
        "<image href=\"https://docs.aspose.com/svg/net/navigation-inspection/shapes.svg\" x=\"250\" y=\"10\" height=\"350\" width=\"350\" />\r\n    \t" +
        "<text x=\"300\" y=\"250\">Embedded SVG image</text>    \r\n" +
    "</svg>";

// Inizializza un documento SVG utilizzando SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Salva il documento in un file con l'enumerazione SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Incorpora SVG all'interno di SVG utilizzando C#

Incorpora SVG all’interno di SVG utilizzando C#.

Ottieni una licenza gratuita

Puoi ottenere una licenza temporanea gratuita per provare Aspose.SVG for .NET senza limitazioni di valutazione.

SVG con immagine all’interno – Risorse gratuite

Puoi saperne di più sulle varie funzionalità della libreria utilizzando le risorse seguenti:

Conclusione

In conclusione, creare immagini SVG con immagini incorporate utilizzando C# è un processo relativamente semplice. Seguendo i passaggi di questo tutorial, puoi creare le tue immagini SVG personalizzate che possono essere utilizzate sul tuo sito web o nelle tue applicazioni. Sfruttando Aspose.SVG for .NET, una libreria SVG potente e versatile, puoi creare facilmente immagini SVG con immagini incorporate che possono essere utilizzate su qualsiasi dispositivo. In caso di ambiguità, non esitate a contattarci sul nostro forum di supporto gratuito.

Guarda anche