SVG עם Image Inside ב-C# | PNG ב-SVG | JPG ב-SVG

Scalable Vector Graphics (SVG) הוא פורמט תמונה רב עוצמה שניתן להשתמש בו כדי ליצור תמונות באיכות גבוהה וניתנות להרחבה עבור האינטרנט. תמונות SVG נוצרות באמצעות קוד XML, מה שמקל על היצירה והשינוי שלהן. במקרים מסוימים, ייתכן שנצטרך להטמיע משאבים כגון תמונות PNG או JPG בתוך SVG. בפוסט זה בבלוג נראה לכם כיצד ליצור SVG עם תמונה בפנים באמצעות C#.

מאמר זה עוסק בנושאים הבאים:

  1. C# API ליצירת SVG עם תמונה בפנים
  2. הטבעת PNG ב-SVG
  3. הטבעת SVG בתוך SVG
  4. קבל רישיון חינם
  5. משאבי למידה בחינם

C# API ליצירת SVG עם תמונה בפנים

נשתמש ב-Aspose.SVG עבור .NET כדי ליצור SVG עם תמונה בפנים. זה מאפשר למפתחים לעבוד עם קבצי SVG ביישומי NET. ה-API מאפשר לטעון, לנתח, לרנדר, ליצור ולהמיר קובצי SVG לפורמטים פופולריים ללא תלות בתוכנה.

אנא הורד את ה-DLL של ה-API או התקן אותו באמצעות NuGet.

PM> Install-Package Aspose.SVG

הטמעת PNG ב-SVG באמצעות C#

אנו יכולים להטמיע בקלות תמונות מפת סיביות בתוך אובייקט SVG באמצעות ה-SVG <image> אלמנט. ה-SVG <image> אלמנט מסוגל להציג תמונות בפורמטים שונים, כגון JPEG, PNG ואפילו גרפיקה SVG. התכונות של <image> אלמנט מגדיר כיצד יש להציג את מפת הסיביות. התכונות העיקריות כוללות:

  • x ו-y: אלה מציינים את הקואורדינטות של הפינה השמאלית העליונה של התמונה.
  • רוחב וגובה: אלו קובעים את הרוחב והגובה של ה"חלון" בו תוצג התמונה. שתי התכונות הללו הן חובה.
  • href ו-xlink:href: תכונות אלו מצביעות על כתובת האתר של קובץ התמונה.
  • preserveAspectRatio: תכונה זו קובעת את אופן קנה המידה של התמונה.

אנו יכולים ליצור SVG בקלות עם PNG בפנים על ידי ביצוע השלבים הבאים:

  1. ציין תוכן SVG כמחרוזת.
  2. לאחר מכן, צור מופע של המחלקה SVGDocument מתוכן המחרוזת.
  3. לבסוף, שמור את התמונה בשיטת Save() .

דוגמת הקוד הבאה מראה כיצד להטמיע תמונת PNG בתוך SVG באמצעות C#.

// ציין תוכן SVG עם תמונת PNG מוטבעת.
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>";

// אתחול מסמך SVG באמצעות SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// שמור את המסמך בקובץ עם ספירת SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
הטמעת PNG ב-SVG באמצעות C#

הטמעת PNG ב-SVG באמצעות C#.

הטמעת SVG בתוך SVG באמצעות C#

באופן דומה, אנו יכולים ליצור SVG עם תמונת SVG בפנים על ידי ביצוע השלבים שהוזכרו קודם לכן.

דגימת הקוד הבאה מראה כיצד להטמיע תמונת SVG בתוך SVG באמצעות C#.

// ציין תוכן SVG עם תמונת SVG מוטבעת.
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>";

// אתחול מסמך SVG באמצעות SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// שמור את המסמך בקובץ עם ספירת SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
הטמעת SVG בתוך SVG באמצעות C#

הטמעת SVG בתוך SVG באמצעות C#.

קבל רישיון חינם

אתה יכול לקבל רישיון זמני בחינם לנסות את Aspose.SVG עבור .NET ללא מגבלות הערכה.

SVG עם תמונה בפנים - משאבים בחינם

תוכל ללמוד עוד על התכונות השונות של הספרייה באמצעות המשאבים הבאים:

סיכום

לסיכום, יצירת תמונות SVG עם תמונות משובצות באמצעות C# היא תהליך פשוט יחסית. על ידי ביצוע השלבים במדריך זה, תוכל ליצור תמונות SVG מותאמות אישית משלך שניתן להשתמש בהן באתר האינטרנט שלך או ביישומים שלך. על ידי מינוף Aspose.SVG עבור .NET, ספריית SVG רבת עוצמה ורב-תכליתיות, תוכל ליצור בקלות תמונות SVG עם תמונות משובצות שניתן להשתמש בהן בכל מכשיר. בכל מקרה של אי בהירות, אנא אל תהסס לפנות אלינו בפורום התמיכה החינמי שלנו.

ראה גם