برنامج تحويل الى صيغة svg. الخلفية كيفية تحويل صورة PNG إلى SVG؟ تعليمات مختصرة حول كيفية استخدام SVG في CSS

تعد صورة SVG أحد تنسيقات المتجهات الرئيسية للجيل القادم من مواقع الويب، وهي متكاملة تمامًا مع معايير HTML5 الجديدة. باستخدام Aurora SVG Viewer & Converter: يمكنك بسهولة عرض رسومات SVG وتحويل إنتاجاتك إلى تنسيقات متعددة.

أدى ظهور HTML5 إلى زيادة استخدام الصور المتجهة بتنسيق SVG. إذا كنت أحد مطوري الويب، فهذا هو الوقت المثالي للتقدم في اللعبة وتجهيز سير عملك بكل ما تحتاجه للعمل مع صور HTML5 وSVG. الخطوة الأولى هي الحصول على نسخة من العرض الترويجي للبرامج المخفضة اليوم، والمتوفر لمستخدمي Mac وWindows!

عارض ومحول Aurora SVGيجعل من السهل تنظيم وعرض وتحويل صور SVG. مع عارض ومحول Aurora SVG، ستستمتع بوضع عرض الصور المصغرة المناسب وعرض المجلد الذي يمكن التعرف عليه على الفور. إذا كنت بحاجة إلى تحويل صورة SVG إلى تنسيق مختلف، عارض ومحول Aurora SVGيحفظ اليوم من خلال تمكينك من حفظ الصور كملفات بتنسيق TIFF أو PNG أو JPB أو BMP أو GIF أو TGA أو XPM أو PPM أو XBM أو حتى PDF. والأفضل من ذلك، أنه يمكنك تحويل ملفات متعددة دفعة واحدة!

وبطبيعة الحال، لديك دائما السيطرة الكاملة على التفاصيل مع عارض ومحول Aurora SVG. اضبط دقة الإخراج، وقم بتحويل أجزاء من صور SVG، وضبط جودة التحويل!

لقطة شاشة ويندوز: لقطة شاشة ماك:

ميزات عارض ومحول Aurora SVG:

1. الدعم نظام التشغيل ويندوز وماك.

2. سهل اختيار المجلدو عرض الصورة المصغرةوضع.

3. معاينة صور SVG بسرعة أو تحويلها؛ يدعم SVG وSVGZ.

4. يتضمن محول SVG إلى تنسيقات صور متعددة ما يلي: تيف، png، jpg، bmp، gif، tga، xpm، جزء في المليون، xbm، وpdf.

5. تحويل دفعة واحدة، أنشئ قائمة بالصور المراد تحويلها، ثم قم بتحويلها في عملية مسح واحدة وحفظها في مجلد آخر.

6. يتم ضبط دقة الإخراج بسهولة باستخدام دقة التكبير المجانية. حدد وقم بتحويل أي منطقة من لوحة SVG.

7. قم بتحويل أي منطقة تختارها: حدد منطقة من صورة SVG وقم بتحويلها.

8. مجموعة سريعة من جودة التحويل.

9. استخدم نظام التشغيل Windows أو Mac OS المفضل لديك لمعاينة SVG أو الرسوم المتحركة بسرعة، وتحويل SVG دفعة واحدة إلى العديد من تنسيقات الصور. المضي قدما، ومحاولة إعطائها!

الجوائز

تعليق المستخدم:

أردت أن أخبرك بمدى استمتاعي ببرنامجك. لقد اشتريت صانع النصوص ثلاثي الأبعاد، والآن اشتريت صانع الرسوم المتحركة ثلاثي الأبعاد. كلا البرنامجين سيجعلان مشاريع الفيديو الخاصة بي مميزة حقًا.

---- جون هارفات (الولايات المتحدة)

هذا البرنامج يبدو مفيدا جدا. سأقوم بالتأكيد بتنزيله وتجربته. تبدو الرسوم المتحركة ثلاثية الأبعاد مفيدة جدًا أيضًا. إنه لأمر مدهش عدد عناوين البرامج التي يتم تقديمها في bitsdujour والتي لم أكن لأواجهها بطريقة أخرى.

لقد انتهيت للتو من تجربة برنامج 3D Animation Maker. واو، أنا معجب جدا! لقد قمت بتصدير إحدى العينات بصيغة avi وأنا سعيد جدًا بالجودة. شكرًا لك على الصفقة - لقد كانت عملية الشراء "بدون تفكير" بعد التجربة. سأفكر بالتأكيد في العرض التقديمي ثلاثي الأبعاد في المستقبل.

---- دون جودارد (الولايات المتحدة)

إن أبسط طريقة لتتبع عمل فني هي فتح الملف أو وضعه في Adobe Illustrator وتتبعه تلقائيًا باستخدام أمر Trace Image: تعليمات Illustrator. استخدام أداة تتبع الصورة - CS6

*حتى أبسط):
باستخدام البرنامج، يتم تحويل الصورة/الصورة/الرسم/الصورة الفوتوغرافية التي تقدمها إلى ناقل مقابل 1 يورو (!) ->الصورة إلى المتجه

=== الخدمات عبر الإنترنت ===

• يتم دفع الصورة الأولى، على الرغم من إمكانية إنشاء صورتين للبدء بهما مجانًا.

باللغة الإنجليزية، على الرغم من أنه ليس من الصعب فهمها. هناك خياران لاستخدامه – عبر الإنترنت أو شراء برنامج كمبيوتر. سعر الاستخدام عبر الإنترنت (غير محدود) هو 7.95 دولارًا أمريكيًا، وتكلفة برنامج سطح المكتب 295.00 دولارًا أمريكيًا. من الممكن طلب التتبع اليدوي.
بالطبع، يمكنك العثور على بوابات مستقلة أرخص، ولكن الخيار متروك للجميع.

دقة

فيما يلي بعض صور المقارنة بين Vector Magic وAdobe Live Trace (CS6) وCorel
كوريل باور تريس (X6). انتبه إلى المعالجة الدقيقة للأشكال بواسطة Vector.

سهولة الاستعمال

لا تحتاج إلى التثبيت ومعرفة عدد كبير من الخيارات والإعدادات لتحقيق نتيجة مقبولة.

كل ما عليك فعله هو الإجابة على بضعة أسئلة بسيطة وهذا كل شيء. إذا لم تكن النتيجة مرضية، فهناك دليل "استكشاف الأخطاء وإصلاحها" حيث يمكنك بسهولة العثور على الإجابة وحل المشكلة.

يمكنك المحاولة مرارا وتكرارا حتى تحصل على نتيجة مرضية.

بشكل عام، يمكنك نقل هذا العمل إلى Vector والقيام بالمزيد من المهام الإبداعية.

الترجمة فضفاضة، ولكن المعنى شيء من هذا القبيل.

مصدر الصور بتنسيق JPG وGIF وPNG وBMP وTIFF. والنتيجة هي ثلاثة خيارات للجودة وبثلاثة تنسيقات: EPS وSVG وPNG. عند الانتهاء، من الممكن التكرار بالجودة المطلوبة المختلفة وبعض التحرير.

• التالي، تماماً حر .

باللغة الإنجليزية بالكامل، ولكن كل شيء واضح في الاستخدام. المزيد من الإعداد والعمل اليدوي، لكنه يستحق ذلك.

• يسمح لك بتحويل الصور إلى . يمكنك إما تحميل ملف أو تقديم رابط للصورة. من الممكن أيضًا تطبيق التأثيرات الرقمية.

في حالة تحويل الصور النقطية (PNG أو JPG) إلى تنسيق SVG، سيتم تحويل الأشكال والكائنات إلى رسومات متجهة بالأبيض والأسود يتم تغيير حجمها دون أي فقدان للجودة. يمكن تلوين هذه الصور باستخدام برامج مجانية للعمل مع الصور المتجهة (وما إلى ذلك). لن يحقق المصورون في معظم الحالات النتيجة المرجوة عند تحويل الصورة النقطية إلى تنسيق SVG.

إذا كنت تقوم بتحويل أي صورة متجهة (على سبيل المثال، تنسيق eps أو ai) إلى تنسيق SVG، فسيحاول المحول الحفاظ على جميع بيانات المتجهات والألوان، وسيتأكد أيضًا من أن الملفين متشابهان قدر الإمكان.

يتيح لك محول التنسيق Scalable Vector Graphics (SVG) إمكانية تحويل ملفات بأكثر من 130 تنسيقًا. اتجاهات التحويل:

3FR إلى SVG، AFF إلى SVG، AI إلى SVG، ANI إلى SVG، ART إلى SVG، ARW إلى SVG، AVI إلى SVG، AVS إلى SVG، BMP إلى SVG، CDR إلى SVG، CGM إلى SVG، CIN إلى SVG، CMYK إلى SVG، وCMYKA إلى SVG، وCR2 إلى SVG، وCRW إلى SVG، وCUR إلى SVG، وCUT إلى SVG، وDCM إلى SVG، وDCR إلى SVG، وDCX إلى SVG، وDDS إلى SVG، وDFONT إلى SVG، وDIA إلى SVG، وDNG إلى SVG، DPX إلى SVG، DXF إلى SVG، EPDF إلى SVG، EPI إلى SVG، EPS إلى SVG، EPSF إلى SVG، EPSI إلى SVG، EPT إلى SVG، EPT2 إلى SVG، EPT3 إلى SVG، ERF إلى SVG، EXR إلى SVG، FAX إلى SVG، FIG إلى SVG، FITS إلى SVG، FPX إلى SVG، FRACTAL إلى SVG، FTS إلى SVG، G3 إلى SVG، GIF إلى SVG، GIF87 إلى SVG، GRAY إلى SVG، GRB إلى SVG، HDR إلى SVG، HRZ إلى SVG، ICB إلى SVG، ICO إلى SVG، ICON إلى SVG، IPL إلى SVG، JBG إلى SVG، JBIG إلى SVG، JNG إلى SVG، JP2 إلى SVG، JPC إلى SVG، JPE إلى SVG، JPEG إلى SVG، JPG إلى SVG، JPX إلى SVG، K25 إلى SVG، KDC إلى SVG، M2V إلى SVG، M4V إلى SVG، MAT إلى SVG، MIFF إلى SVG، MNG إلى SVG، MONO إلى SVG، MOV إلى SVG، MP4 إلى SVG، MPC إلى SVG، MPEG إلى SVG، MPG إلى SVG، MRW إلى SVG، MSL إلى SVG، MSVG إلى SVG، MTV إلى SVG، MVG إلى SVG، NEF إلى SVG، NRW إلى SVG، ORF إلى SVG، OTB إلى SVG، OTF إلى SVG، PAL إلى SVG، PALM إلى SVG، PAM إلى SVG، PBM إلى SVG، PCD إلى SVG، PCDS إلى SVG، PCL إلى SVG، PCT إلى SVG، PCX إلى SVG، PDB إلى SVG، PDF إلى SVG، PDFA إلى SVG، PEF إلى SVG، PES إلى SVG، PFA إلى SVG، PFB إلى SVG، PFM إلى SVG، PGM إلى SVG، PICON إلى SVG، PICT إلى SVG، PIX إلى SVG، PJPEG إلى SVG، PLASMA إلى SVG، PNG إلى SVG، PNG24 إلى SVG، PNG32 إلى SVG، PNG8 إلى SVG، PNM إلى SVG، PPM إلى SVG، PS إلى SVG، PSD إلى SVG، PTIF إلى SVG، PWP إلى SVG، RAF إلى SVG، RAS إلى SVG، RGB إلى SVG، RGBA إلى SVG، RLA إلى SVG، RLE إلى SVG، SCT إلى SVG، SFW إلى SVG، SGI إلى SVG، SK إلى SVG، SK1 إلى SVG، SR2 إلى SVG، SRF إلى SVG، SUN إلى SVG، SVG إلى SVG، SVGZ إلى SVG، TGA إلى SVG، TIF إلى SVG، TIFF إلى SVG، TIM إلى SVG، TTC إلى SVG، TTF إلى SVG، TXT إلى SVG، VDA إلى SVG، VICAR إلى SVG، VID إلى SVG، VIFF إلى SVG، VST إلى SVG، WBMP إلى SVG، WEBP إلى SVG، WMF إلى SVG، WMZ إلى SVG، WPG إلى SVG، X إلى SVG، X3F إلى SVG، XAML إلى SVG، XBM إلى SVG، XC إلى SVG، XCF إلى SVG، XFIG إلى SVG، XPM إلى SVG، XV إلى SVG، XWD إلى SVG، YCBCR إلى SVG، YCBCRA إلى SVG، YUV إلى SVG

مبني على حلول مفتوحة مثل Autotrace وImageMagick ومكونات رسومات Linux المتنوعة.

التنسيقات المطلوب تحويلها:

SVG - ملفات الرسومات المتجهة القابلة للتحجيم
AI - ملفات Adobe Illustrator (تعتمد على التذييلات)
CGM - ملفات تعريف رسومات الكمبيوتر
WMF - ملفات تعريف Windows
SK - ملفات رسم/Skencil
PDF - تنسيق المستندات المحمولة
EPS - بوستسكريبت
PLT - HPGL لقطع ملفات الراسمة

وأيضا: P2E، FIG، EMF، MIF، ER، DXF، EPD، CGM، oDR2D

في بعض الأحيان يصبح من الضروري حفظ ملف svg بتنسيق png باستخدام المتصفح. لسوء الحظ، لا يحتوي المتصفح على واجهة برمجة تطبيقات سحرية تسمح بذلك دون الحاجة إلى عمليات اختراق مختلفة. ماذا تفعل إذا كنت لا تزال ترغب في تحقيق ما تريد؟

كانت الفكرة الأولى التي خطرت في ذهني هي القيام بذلك من خلال اللوحة القماشية، التي تحتوي على طريقة toDataURL("image/png");
لذا، كتبت نصًا بسيطًا: jsfiddle، github:

var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var Canvas = document.querySelector("canvas"), context = Canvas.getContext("2d"); Canvas.setAttribute("width", 526); Canvas.setAttribute("height", 233); صورة فار = صورة جديدة؛ image.src = imgsrc; image.onload = function () ( context.drawImage(image, 0, 0); var Canvasdata = Canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " save"; a.download = "export_" + Date.now() + ".png"; a.href = Canvasdata; document.body.appendChild(a); Canvas.parentNode.removeChild(canvas); );

جوهر البرنامج النصي بسيط: لقد قمت بتحويل svg إلى dataUri، وقمت بتحميله عبر الصورة، ورسمت صورة على القماش وحولتها إلى png. يبدو أن الهدف قد تحقق ويمكننا الاسترخاء. نجح هذا الأسلوب في Firefox وChrome، ولكن عندما فتحته في المتصفح المفضل لدى الجميع، IE، ظهر لي هذا الخطأ الرائع:

الحقيقة هي أن شركة IE تعتقد أنه تم تحميل الصورة من مضيف آخر. لسوء الحظ، لن تتمكن من تعيين الأصل لـ dataUri. في الواقع، يمكن العثور على وصف للقواعد هنا: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. كان من الممكن، بالطبع، إنشاء وكيل لملف svg من خلال الخادم، ومن ثم سيعمل كل شيء، لكنني أردت حلًا خالصًا من جانب العميل.

وبعد ذلك تذكرت مكتبة canvg الرائعة. باستخدام هذه المكتبة، أرسم svg على اللوحة القماشية، ثم أتابع كما في الخيار الأول: خذ toDataURL("image/png") . والنتيجة هي هذا الكود البسيط: جيثب:

var svg = document.querySelector("svg"); var Canvas = document.createElement("canvas"); Canvas.height = svg.getAttribute("height"); Canvas.width = svg.getAttribute("width"); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = Canvas.toDataURL("image/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data. length); لـ (var i = 0، len = data. length؛ i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");

ومن الجدير بالذكر هنا أنني استخدمت أيضًا مكتبة FileSaver لإظهار مربع حوار الحفظ.
هذا كل شيء، لقد حققنا النتيجة المرجوة.

شيء واحد جدير بالملاحظة هو أنني تساءلت عن حفظ svg إلى png عندما كنت أكتب البرنامج الإضافي للتصدير tauCharts. نظرًا لأنه تم تعيين الأنماط الموجودة في ملف svg من ملف خارجي، فمن أجل تحقيق أقصى قدر من التشابه مع ملف svg الأصلي، أقوم بإدراج نمط مضمّن في ملف svg. ونحصل على هذه النتيجة.

آمل أن تكون المقالة مفيدة لك وتوفر وقتك.

في أحد المشاريع، تم عرض أيقونات صغيرة بتنسيق svg بالقرب من القائمة، وكان من الضروري أنه عند تحريك المؤشر فوق عنصر القائمة، يتغير لون النص والأيقونة. لكي لا يتم إنتاج عدد كبير من الصور، تقرر ترجمة svg إلى كود واستخدامه في أنماط CSS.

تعليمات مختصرة حول كيفية استخدام SVG في CSS

نستخدم الكود الناتج في ملف CSS الخاص بنا.

على سبيل المثال، خذ أيقونة Facebook (أيقونة قياسية مع تعديل طفيف).

على الموقع https://jakearchibald.github.io/svgomg/ انقر "فتح SVG"أو ببساطة اسحب الرمز إلى منطقة العرض. في الزاوية اليسرى العليا انقر "شفرة"، قم بتمييز الرمز، ثم انقر فوق أيقونة النسخ، لذلك سوف نحصل على رمز صورة SVG الخاصة بنا في المخزن المؤقت.

شيء من هذا القبيل:

ثم قم بلصق الكود الناتج في النافذة أعلاه، وانقر فوق Converte واحصل على الكود النهائي الصورة الخلفية:

صورة الخلفية: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox = "0 0 20 20"%3e%3cpath fill-rule = "evenodd" clip-rule = "evenodd" fill = "%23FFF" d = "M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h -3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

انسخه واستخدمه في ملف CSS الخاص بك.

لتغيير اللون، قم بتغيير fill="%23FFF" ، فقط ضع في اعتبارك أن %23 هي علامة # عادية، أي أن fill="%23000" هي علامة سوداء عادية (#000).

عند التحويل من الصور النقطية مثل PNG إلى SVGأو JPG إلى SVG، سيقوم بتحويل النماذج والكائنات الخاصة بك إلى صور بالأبيض والأسود في رسومات متجهة يمكن تكبيرها دون فقدان الجودة. ثم يمكنك رسمها في أي محرر رسومات متجهة مثل Inkscape.

من المرجح أن تحويل الصور العادية لن يحقق النتيجة المرجوة.

للحصول على أفضل النتائج عند التحويل إلى SVG، استخدم صورة ذات خلفية صلبة.

• للتحويل إلى SVG، حدد الملف، وانتظر حتى يتم تنزيله على خادمنا.
• يدعم تقريبًا جميع تنسيقات الصور (PNG، JPG، BMP وغيرها). حجم الملف ليس محدودًا، ولكن كلما زاد حجم الملف، زاد الوقت الذي يستغرقه التحويل.
• بعد التحويل، سوف ترى الملف الأصلي والنتيجة تحته.
• تحميل النتيجة عبر الرابط

لماذا تحتاج إلى تنسيق SVG وكيفية استخدامه؟ بعد تحويل PNG إلى SVG أو JPG إلى SVG

SVG (Scalable Vector Graphics) هو تنسيق رسومات متجهة يستند إلى XML
الميزة هي أنه يمكنك تغيير حجم الصورة دون فقدان الجودة والتفاصيل. عندما تقوم بزيادة الحجم، تحافظ الصورة المتجهة على شكل المنحنيات، بحيث يمكن عرض الصورة بأي دقة وضوح.