كيفية تحويل صورة PNG إلى SVG؟ تحويل SVG إلى PNG كيفية تحويل صور 2D SVG

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

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

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

بالطبع، لديك دائما التحكم الكامل في التفاصيل Aurora SVG Viewer & Converterوبعد ضبط دقة الإخراج، وتحويل الأزمة لصور SVG، وتحديد جودة التحويل!

لقطة شاشة Windows: لقطة شاشة Mac:

Aurora SVG Viewer & Converter الميزات:

1. الدعم نظام التشغيل Windows & Mac OS.

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

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

4. محول SVG إلى تنسيقات صور متعددة تشمل: tIFF، PNG، JPG، BMP، GIF، TGA، XPM، PPM، XBM، و PDF.

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

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

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

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

الفكرة الأولى التي اتخذت إلى الذهن للقيام بذلك من خلال قماش، والتي لديها طريقة ToDataurl ("صورة / PNG")؛
لذلك، كتبت رسالة نصية بسيطة: JSfiddle، GitHub:

Var HTML \u003d Document.QuerySector ("SVG"). ProteNode.innerhtml؛ var imgsrc \u003d "البيانات: image / svg + xml؛ base64،" + بتوا (html)؛ var canvas \u003d document.queryector ("قماش")، السياق \u003d canvas.getContext ("2D")؛ canvas.setattribute ("العرض"، 526)؛ Canvas.Setattribute ("الارتفاع"، 233)؛ var صورة \u003d صورة جديدة؛ image.src \u003d imgsrc؛ image.onload \u003d وظيفة () (context.drawimage (image، 0، 0)؛ var canvasdata \u003d canvas.todataurl ("image / png")؛ var a \u003d document.createelement ("a")؛ a.textcontent \u003d " حفظ "؛ A.Download \u003d" Export_ "+ Date.Now () +" .png "؛ a.href \u003d canvasdata؛ document.body.appendchild (a)؛ canvas.parentnode.removechild (قماش)؛)؛

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

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

ثم تذكرت مكتبة Canvg الرائعة. مع هذه المكتبة، ارسم SVG على قماش، ثم أفعل ذلك في الإصدار الأول: أتخذ ToDataurl ("صورة / PNG"). اتضح مثل هذا الرمز البسيط: GitHub:

Var SVG \u003d Document.QuerySelector ("SVG")؛ var canvas \u003d document.createelement ("قماش")؛ canvas.height \u003d svg.getattribute ("الارتفاع")؛ canvas.width \u003d svg.getattribute ("العرض")؛ Canvg (قماش، svg.parentnode.innerhtml.trim ())؛ var dataurl \u003d canvas.todataurl ("صورة / PNG")؛ var data \u003d atob (dataurl.substring ("البيانات: الصورة / PNG؛ base64،". طول))، asarray \u003d uint8array جديد (data.length)؛ ل (var i \u003d 0، len \u003d data.length؛ أنا< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");

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

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

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

اعتمادا علي لماذا تريد التحويل من .png v.svg، قد لا داعي للقلق. قد يكون التحويل من v.png (النقط) v.svg (ناقل) مؤلما إذا لم تكن على دراية بالأدوات المتاحة أو إذا لم تكن مصمما رسميا حسب المهنة.

إذا أرسل لك شخص ما ملف كبير بدقة عالية (على سبيل المثال، 1024x1024)، يمكنك تغيير حجمها إلى أي حجم تقريبا تريد استخدامه في GIMP. في كثير من الأحيان مشاكل مع تغيير حجم الصورة، إذا كان القرار (عدد بكسل في البوصة) منخفضة للغاية. لإصلاحه في Gimp، يمكنك:

  1. ملف -\u003e فتح: ملف الخاص بك
  2. صورة -\u003e خصائص الصورة: التحقق من الدقة ومساحة اللون. تريد دقة حوالي 300 نقطة في البوصة. في معظم الحالات، تحتاج إلى مساحة اللون لتكون RGB.
  3. صورة -\u003e وضع: ضبط RGB
  4. صورة -\u003e صورة النطاق: احترم حجمه بشكل منفصل، تثبيت ودقة Y إلى 300 أو أكثر. مقياس.
  5. صورة -\u003e حجم الصورة: الآن يجب أن يكون القرار 300، والآن يمكنك تغيير حجم الصورة إلى أي حجم تقريبا.

ليس سهلا مثل تغيير حجم الحجم. ملف thevg، ولكن، بالطبع، هو أسهل وأسرع من محاولة التحويل. png v.svg، إذا كان لديك بالفعل صورة كبيرة بدقة عالية.

مع Adobe Illustrator:

فتح Adobe Illustrator. انقر فوق "ملف" وحدد "فتح" لتنزيل file.png إلى البرنامج. قم بإزالة الصورة حسب الحاجة قبل حفظها كملف .svg. انقر فوق "ملف" وحدد "حفظ باسم". قم بإنشاء اسم ملف جديد أو استخدم الاسم الموجود. تأكد من أن نوع الملف المحدد هو SVG. حدد دليلا وانقر فوق "حفظ" لحفظ الملف.

أنا أفضل AI، لأنه يمكنك إجراء أي تغييرات.

أنا فقط وجدت هذا السؤال والأجوبة، وأنا أحاول أن أفعل نفس الشيء! لم أكن أرغب في استخدام بعض الأدوات الأخرى المذكورة. (لا تريد إرسال بلدي بريد إلكتروني ولا تريد أن تدفع). لقد وجدت أن inkscape (v0.91) يمكن أن يؤدي وظيفة جيدة جدا. هذا البرنامج التعليمي سريع وسهل فهمه.

انها بسيطة مثل اختيار صورة نقطية في inkskape و Shift + Alt + B.

sudo apt-get install potrace imagemagick تحويل -فاتن input.png الإخراج. pbbm potrace -s الناتج. pbbm -o outgration.svg rm dution.pbm

يوجد موقع على شبكة الإنترنت حيث يمكنك تنزيل صورتك ورؤية النتيجة.

ولكن إذا كنت ترغب في تحميل صورة SVG، تحتاج إلى تسجيل. (إذا قمت بالتسجيل، ستتلقى صورتين مجانا)

ومع ذلك، فإنه ليس مثاليا.

PNG هو النمط نقطية، وSVG متجه تصميم الرسوم البيانية أن الصور النقطية الدعم، لذلك سوف يتم تحويل الصورة إلى ناقلات، ومجرد صورة المضمنة في شكل النواقل. يمكنك القيام بذلك باستخدام http://www.inkscape.org/ وهو مجاني. سيقدمها، ولكن لديها أيضا محرك تتبع مباشر سيحاول تحويله في الطريق إذا كنت تريد (باستخدام Potrace). انظر التتبع المباشر في Adobe Illustrator (Commicial) هو مثال:

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

إذا كنت في بعض نظام لينكس، يماغيماغيك ما يرام. أولئك.

تحويل somefile.png somefile.svg.

وهي تعمل مع كومة من الأشكال المختلفة.

ومع ذلك، لوسائل الإعلام الأخرى، مثل الفيديو والصوت (FFMPEG)، أعلم أنك أشار بوضوح PNG على SVG؛ لا يزال مرتبطا بالوسائط.

فمبيج -i somefile.mp3 somefile.ogg

قل لي إذا كنت تريد أن تذهب من خلال الكثير من الملفات؛ دورة استخدام الحيل قذيفة الرئيسية.

لو في .JPG *. هل تحويل $ f $ (f٪ jpg) png. منجز

يقوم بحذف JPG ويضيف PNG أن يقول لتحويل ما تريد.

إن أبسط طريقة لتتبع كائن رسومي لفتح أو وضع ملف في Adobe Illustrator وإجراء التتبع التلقائي باستخدام "صورة تتبع" الأمر: تعليمات عبر المصور. باستخدام أداة Tracing Image - CS6

* أسهل):
البرامج المقدمة من قبل الصورة / الصورة / الرسم / الصورة - في ناقل ل 1 (!) اليورو -\u003eصورة في ناقلات

\u003d\u003d\u003d \u003d\u003d\u003d الخدمات عبر الإنترنت

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

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

دقة

فوق العديد من الصور المقارنة لناقجة Magic، Adobe Live Trace (CS6) و Corel
Corel PowerTrace (X6). انتبه إلى تكوين معالجة ناقلات النموذج.

سهل الاستخدام

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

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

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

بشكل عام، يمكنك وضع هذه الوظيفة على المتجه وتفعل المزيد من المهام الإبداعية.

في كثير من الأحيان، ولكن المعنى هو تقريبا ذلك.

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

  • التالي، تماما مجانا .

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


تنسيقات المصدر المدعومة:
  • PNG رسومات شبكة محمولة
  • tga truevision targa الصورة
  • PBM تنسيق الصورة النقطية المحمولة
  • pnm شكل محمول
  • PGM تنسيق الرمادي المحمولة
  • PPM تنسيق Pixmap المحمولة
  • BMP صورة Microsoft Windows الصورة النقطية

تنسيقات الإخراج:
  • رسومات ناقلات SVG
  • ePS مغلفة بوستسكريبت.
  • aI Adobe Illustrator.
  • تنسيق DXF DXF (ذيل الروايات)
  • p2E Pstoedit formine format
  • sK رسم
  • fIG XFIG 3.2.
  • eMF تنسيق ملف التعريف
  • mIF Frame Maker تنسيق MIF
  • إيه مرونة شكل الواقع شكل
  • تنسيق EPD EPD.
  • تنسيق PDF PDF.
  • cGM رسومات الكمبيوتر ملفات
  • dR2D IFF DR2D؟ صيغة.
  • يسمح لك بتحويل الصور إلى التنسيق. يمكنك تنزيل الملف وحدد الارتباط بالصورة. من الممكن أيضا فرض الآثار الرقمية.

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

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

يتيح لك محول تنسيق Vector Vector (SVG) المتطوق تحويل الملفات لأكثر من 130 تنسيقا. اتجاهات التحويل:

3FR في SVG، AFF في SVG، AI في SVG، العاني في SVG، ART في SVG، ARW في SVG، AVI في SVG، AVS في SVG، BMP في SVG، مجلس الإنماء والإعمار في SVG، CGM في SVG، CIN في SVG، CMYK SVG ، CMYKA في SVG، CR2 في SVG، CRW في SVG، CUR في SVG، قص في SVG، DCM في SVG، DCR في SVG، DCX في SVG، DDS في SVG، DFont في SVG، DIA في SVG، DNG في SVG، DPX في SVG، DXF في SVG، EPDF في SVG، برنامج التحصين الموسع في SVG، EPS في SVG، EPSF في SVG، EPSI في SVG، EPT في SVG، EPT2 في SVG، EPT3 في SVG، ERF في SVG، EXR في SVG، فاكس SVG، FIG في SVG، تناسبها في SVG، FPX في SVG، كسورية في SVG، FTS في SVG، G3 في SVG، GIF في SVG، GIF87 في SVG، GRAY في SVG، GRB في SVG، HDR في SVG، HRZ في SVG، ICB في SVG، ICO في SVG، أيقونة في 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، مات في SVG، MIFF في SVG، MNG في SVG، مونو في SVG، MOV في SVG، MP4 في SVG، MPC في SVG، MPEG في SVG، MPG في SVG، MR W في SVG، MSL في SVG، MSVG في SVG، MTV في SVG، MVG في SVG، NEF في SVG، NRW في SVG، ORF في SVG، وتب في SVG، OTF في SVG، PAL في SVG، بالم في 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، المجنحة في SVG، PGM في SVG، بيكون في SVG، PICT في SVG، PIX في SVG، PJPEG في SVG، البلازما في SVG، PNG في SVG، PNG24 في SVG، PNG32 في SVG، PNG8 في SVG، PNM في SVG ، جزء في المليون في SVG، PS في SVG، PSD في SVG، PTIF في SVG، مشروع الأشغال العامة في 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، والشمس في SVG، SVG في SVG، SVGZ في SVG، TGA في SVG، TIF في SVG، TIFF في SVG، TIM في SVG ، TTC في SVG، TTF في SVG، TXT في SVG، VDA في SVG، النائب في SVG، VID في SVG، VIFF في SVG، VST في SVG، WBMP في SVG، ويب بي في 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، يماغيماغيك، ومختلف مكونات الرسوم البيانية لينكس.

صيغ للتحويل:

SVG - ملفات رسومات ناقلات قابلة للتحجيم
AI - أدوبي المصور الملفات (بوستسكريبت بناء)
CGM - ملفات ملفات رسومات الكمبيوتر
WMF - الملفات ملف تعريف ويندوز
SK - ملفات رسم / مشتيل
PDF - تنسيق المستند المحمول
EPS - بوستسكريبت.
PLT - HPGL لقطع ملفات الراسمة

كذلك: P2E، FIG، EMF، MIF، ER، DXF، EPD، CGM، ODR2D

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

إرشادات موجزة كيفية استخدام SVG في CSS

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

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

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

تقريبا مثل هذا:

ثم أدخل الرمز المستلم النافذة أعلاه، انقر فوق Converte واستعد الصورة الخلفية.:

خلفية - صورة: URL ("البيانات: Image / SVG + XML؛ Charset \u003d OUTF-8،٪ 3CSVG XMLNS \u003d" http://www.w3.org/2000/svg "العرض \u003d" 20 "الارتفاع \u003d" 20 "Viewbox \u003d" 0 20 20 "٪ 3E٪ 3CPath التعبئة الحكم \u003d" overodd "clip-toad \u003d" overodd "املأ \u003d"٪ 23fff "d \u003d" M12.748 16V-1H6V1H-6ZM0-3H6V1H-6V-1ZM4 5H -4V-1H4V1ZM13.748 9.975V-3H-4V-1C0-1.104.896-2 2،104.896-2 2-2H2V-2.95H-2C-2.8.256-5 2.583-5 5.45 0.45 0.017.005.032.005.05h-.005V.45 -3V3H3V8H3V-8H4Z "/٪ 3E٪ 3C / SVG٪ 3E")؛

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

لتغيير اللون، قم بتغيير التعبئة \u003d "٪ 23FFF"، فقط نأخذ في الاعتبار أن٪ 23 هو علامة منتظمة #، وهذا هو، املأ \u003d "٪ 23000" هو أسود منتظم (# 000).