نحوه تبدیل تصویر به svg پس زمینه چگونه تصویر PNG را به SVG تبدیل کنیم؟ راهنمای کوتاه در مورد نحوه استفاده از SVG در CSS

گاهی اوقات لازم است svg را با استفاده از مرورگر در png ذخیره کنید. متأسفانه مرورگر دارای api جادویی نیست که به شما اجازه دهد بدون هک های مختلف این کار را انجام دهید. اگر هنوز می خواهید به آنچه می خواهید برسید چه باید کرد؟

اولین ایده ای که به ذهنم رسید این بود که این کار را از طریق بوم انجام دهم که دارای یک 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); var image = تصویر جدید; image.src = imgsrc; image.onload = تابع () (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 تبدیل کردم. به نظر می رسید که هدف محقق شده است و می توانید آرامش داشته باشید. این روش در فایرفاکس و کروم کار می کرد، اما وقتی آن را در مرورگر مورد علاقه خود یعنی IE باز کردم، با یک خطای فوق العاده مواجه شدم:

موضوع این است که اینترنت اکسپلورر فکر می کند که تصویر از میزبان دیگری بارگذاری شده است. متأسفانه، تنظیم مبدا برای dataUri کار نخواهد کرد. در واقع، شرح قوانین را می توان در اینجا یافت: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements . البته امکان پروکسی svg از طریق سرور وجود داشت و سپس همه چیز کار می کرد، اما من یک راه حل صرفاً سمت کلاینت می خواستم.

و بعد یاد کتابخانه فوق العاده canvg افتادم. با کمک این کتابخانه، svg را روی بوم می کشم و سپس مانند گزینه اول انجام می دهم: I take toDataURL("image/png") . یک کد ساده معلوم شد: github:

var svg = document.querySelector("svg"); var canvas = document.createElement("canvas"); canvas.height = svg.getAttribute("ارتفاع"); 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 برای فراخوانی کادر محاوره ای ذخیره استفاده کردم.
همین، ما به نتیجه مطلوب رسیده ایم.

شایان ذکر است یک نکته مهم است - وقتی در حال نوشتن یک افزونه برای صادرات tauCharts بودم، در مورد ذخیره svg در png تعجب کردم. از آنجایی که استایل‌های موجود در svg از یک فایل خارجی تنظیم می‌شوند، برای دستیابی به حداکثر شباهت با svg اصلی، یک استایل درون خطی را در svg قرار می‌دهم. و به این نتیجه می رسیم.

امیدوارم مقاله برای شما مفید باشد و در وقت شما صرفه جویی کند.

هنگامی که شما از تصاویر شطرنجی مانند PNG به SVGیا JPG به SVG، فرم ها و اشیاء شما را به تصاویر سیاه و سفید در گرافیک های برداری تبدیل می کند که می توانند بدون افت کیفیت بزرگ شوند. سپس می توانید آنها را در هر ویرایشگر گرافیکی برداری مانند Inkscape رنگ کنید.

تبدیل تصاویر معمولی، به احتمال زیاد، نتیجه دلخواه را نخواهد داشت.

برای بهترین نتیجه در تبدیل به SVG، از تصویر با پس زمینه جامد استفاده کنید.

• برای تبدیل به SVG، فایل را انتخاب کنید، صبر کنید تا در سرور ما دانلود شود.
• تقریباً از تمام فرمت های تصویر (PNG، JPG، BMP و غیره) پشتیبانی می کند. اندازه فایل محدود نیست، اما هر چه حجم فایل بیشتر باشد، زمان بیشتری برای تبدیل نیاز دارد.
• پس از تبدیل فایل اصلی و نتیجه را در زیر آن خواهید دید.
• نتیجه را از طریق لینک دانلود کنید.

چرا به فرمت SVG و نحوه استفاده از آن نیاز دارید؟ پس از تبدیل PNG به SVG یا JPG به SVG

SVG (گرافیک برداری مقیاس پذیر) یک فرمت گرافیکی برداری مبتنی بر XML است
مزیت این است که می توانید اندازه تصویر را بدون از دست دادن کیفیت و جزئیات تغییر دهید. هنگامی که اندازه را افزایش می دهید، تصویر برداری شکل منحنی ها را حفظ می کند، بنابراین تصویر می تواند با هر وضوحی نمایش داده شود.

به نظر می رسد خیلی خوب کار نمی کند. در اینجا یک مثال است که از پرچم -flatten برای تبدیل استفاده می کند:

sudo apt-get install potrace imagemagick convert -flatten input.png output.ppm potrace -s output.ppm -o output.svg rm output.ppm

پدیده جالب دیگر این است که می توانید از PPM (256 * 3 رنگ، یعنی RGB)، PPM (256 رنگ، یعنی مقیاس خاکستری) یا PPM (فقط 2 رنگ، یعنی فقط سفید یا سیاه) استفاده کنید. از مشاهدات محدود من، به نظر می رسد که در تصاویری که ضد مستعار هستند، PPM و PPM (که می بینم SVGهای یکسان تولید می کنند) ناحیه رنگ را کوچک می کنند، در حالی که PPM ناحیه رنگ را گسترش می دهد (البته اندکی). احتمالاً این تفاوت بین تست پیکسل > (256/2) و تست پیکسل > 0 است. می توانید با تغییر پسوند فایل، یعنی استفاده از PPM زیر، بین آنها جابه جا شوید:

sudo apt-get install potrace imagemagick convert -flatten input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm

چگونه تصویر PNG را به SVG تبدیل کنیم؟

با این حال، این ایده آل نیست.

png سبک است بیت مپو SVG بردار است طراحی گرافیکی، که از بیت مپ پشتیبانی می کند، بنابراین تصویر را به بردار تبدیل نمی کند، بلکه فقط یک تصویر جاسازی شده در فرمت برداری است. می توانید این کار را با استفاده از http://www.inkscape.org/ که رایگان است انجام دهید. آن را تزریق می کند، با این حال یک موتور Live Trace نیز دارد که در صورت تمایل سعی می کند آن را به مسیر تبدیل کند (با استفاده از potrace). ردیابی رو به جلو در adobe illustrator (تجاری) یک مثال است:

اگر در برخی هستید سیستم لینوکس، imagemagick عالی است. آن ها

تبدیل somefile.png somefile.svg

این با یک دسته از فرمت های مختلف کار می کند.

با این حال، برای رسانه های دیگر مانند ویدئو و صدا (ffmpeg)، من می دانم که شما به وضوح png را به svg علامت گذاری کرده اید. هنوز به رسانه ها متصل است.

ffmpeg -i somefile.mp3 somefile.ogg

اگر می‌خواهید فایل‌های زیادی را مرور کنید، فقط درخواست کنید. حلقه با استفاده از ترفندهای پوسته اولیه.

برای f در *.jpg; $f $(f%jpg)png را تبدیل کنید. انجام شده

این jpg را حذف می کند و یک png اضافه می کند که به شما می گوید آنچه را که می خواهید تبدیل کنید.

یک وب سایت وجود دارد که می توانید تصویر خود را آپلود کنید و نتیجه را ببینید.

اما اگر می خواهید یک تصویر svg دانلود کنید، باید ثبت نام کنید. (در صورت ثبت نام 2 تصویر رایگان دریافت خواهید کرد)

با adobe illustrator:

باز کن Adobe Illustrator. روی "File" کلیک کنید و "Open" را انتخاب کنید تا فایل .PNG در برنامه بارگذاری شود. قبل از اینکه تصویر را به عنوان فایل SVG ذخیره کنید، آن را در صورت نیاز استخراج کنید. روی "File" کلیک کنید و "Save As" را انتخاب کنید. یک نام فایل جدید ایجاد کنید یا از نام فایل موجود استفاده کنید. مطمئن شوید که نوع فایل انتخابی SVG باشد. یک دایرکتوری را انتخاب کنید و روی Save کلیک کنید تا فایل ذخیره شود.

من هوش مصنوعی را ترجیح می دهم زیرا شما می توانید هر تغییری ایجاد کنید

من حدس می زنم که شما می خواهید بنویسید نرم افزاربرای این. برای انجام ساده لوحانه، فقط خطوط را پیدا کرده و بردارها را تنظیم کنید. برای انجام هوشمندانه این کار، شما سعی می کنید شکل ها را با طراحی مطابقت دهید (مدل مناسب). همچنین، باید سعی کنید مناطق شطرنجی را تعریف کنید (مناطقی که نمی‌توانید با شرم‌ها مدل‌سازی کنید یا بافت‌ها را اعمال کنید. من رفتن به این مسیر را توصیه نمی‌کنم، زیرا زمان زیادی طول می‌کشد و نیاز به دانش گرافیک و بینایی کامپیوتری دارد، اما، خروجی به طور قابل توجهی و مقیاس بسیار بهتر از نتیجه اصلی شما خواهد بود.

ساده ترین راه برای ردیابی یک گرافیک، باز کردن یا قرار دادن فایل در Adobe Illustrator و ردیابی خودکار با استفاده از دستور Image Trace: Illustrator Help است. با استفاده از ابزار Image Trace - CS6

*حتی ساده تر):
به وسیله نرم افزار، تصویر/تصویر/طراحی/عکس ارائه شده توسط شما - به یک وکتور به قیمت 1 (!) یورو ->تصویر به وکتور

=== خدمات آنلاین ===

• اولین مورد پولی است، اگرچه می توان دو تصویر شروع را به صورت رایگان ساخت.

در زبان انگلیسی، اگرچه به راحتی قابل درک است. دو گزینه برای استفاده - آنلاین یا خرید برنامه برای رایانه. قیمت استفاده آنلاین (نامحدود) 7.95 دلار است، برنامه دسکتاپ 295.00 دلار هزینه دارد. امکان سفارش ردیابی دستی وجود دارد.
البته، شما می توانید آن را ارزان تر در پورتال های فریلنسر پیدا کنید، خوب، انتخاب با همه است.

دقت

در بالا چند تصویر مقایسه ای از Vector Magic، Adobe Live Trace (CS6) و Corel وجود دارد.
Corel PowerTRACE (X6). به دقت مدیریت Shape Vector توجه کنید.

راحتی در استفاده

برای رسیدن به نتیجه قابل قبول نیازی به نصب و دانستن گزینه ها و تنظیمات بسیار زیادی ندارید.

شما فقط باید به چند سوال ساده پاسخ دهید و تمام. اگر نتیجه رضایت بخش نبود، یک راهنمای "عیب" وجود دارد، جایی که می توانید به راحتی پاسخ را پیدا کنید و مشکل را حل کنید.

می توانید بارها و بارها تلاش کنید تا به نتیجه رضایت بخش برسید.

به طور کلی می توانید این کار را به Vector تغییر دهید و کارهای خلاقانه تری انجام دهید.

ترجمه رایگان است، اما معنی چیزی شبیه به این است.

منبع تصاویر در فرمت های JPG، GIF، PNG، BMP و TIFF. نتیجه در سه گزینه با کیفیت و در سه فرمت EPS، SVG و PNG است. پس از اتمام، امکان تکرار با کیفیت دلخواه متفاوت و مقداری ویرایش وجود دارد.

• بعد، کامل رایگان .

کاملا به زبان انگلیسی، اما با استفاده از همه چیز واضح است. کمی تنظیمات بیشتر و خود ساختهاما ارزشش را دارد

• به شما امکان می دهد تصاویر را به . می توانید یک فایل آپلود کنید یا پیوندی به یک تصویر ارائه دهید. امکان همپوشانی جلوه های دیجیتالی نیز وجود دارد.

در صورت تبدیل تصاویر بیت مپ (PNG یا JPG) به فرمت SVG، اشکال و اشیا به سیاه و سفید تبدیل می شوند. گرافیک برداری، که بدون افت کیفیت مقیاس می شود. چنین تصاویری را می توان با استفاده از رنگ آمیزی کرد برنامه های رایگانبرای کار با تصاویر برداری (و غیره). عکاسان در اکثر موارد هنگام تبدیل یک بیت مپ به فرمت SVG به نتیجه دلخواه نخواهند رسید.

اگر هر تصویر برداری (مثلا فرمت eps یا ai) را به فرمت SVG تبدیل می کنید، مبدل سعی می کند تمام داده های برداری و رنگ را حفظ کند و همچنین اطمینان حاصل کند که دو فایل تا حد ممکن مشابه هستند.

مبدل فرمت گرافیک برداری مقیاس پذیر (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 SVG، CMYKA به SVG، CR2 به SVG، CRW به SVG، CUR به SVG، CUT به SVG، DCM به SVG، DCR به SVG، DCX به SVG، DDS به SVG، DFONT به SVG، DIA ​​به SV DPX به SVG، DXF به SVG، EPDF به SVG، EPI به SVG، EPS به SVG، EPSF به SVG، EPSI به SVG، EPT به SVG، EPT2 به SVG، EPT3 به ​​SVG، ERF به SVG به SVG، SVG، FIG به SVG، متناسب با SVG، FPX به SVG، FRACTAL به SVG، FTS به SVG، G3 به SVG، GIF به SVG، GIF87 به SVG، خاکستری به SVG، GRB به SVG، HDR به SVG، HDR به 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 به SVG، K25 به SVG، KDC به SVG، M2V به SVG، M4V به SVG، MAT به SVG، MIFF به SVG، MNG به SVG، MONO به SVG، MOV به SVG، MP4 به SVG، MPC به SV MPG به SVG، MRW به SVG، MSL به SVG، MSVG به SVG، MTV به SVG، MVG به SVG، NEF به SVG، NRW به SVG، ORF به SVG، OTB به SVG، OTF به SVG به 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، PFA به SVG، PFB به SVG، PFM به SVG، PGM به SVG، PICON به SVG، PICT به SVG، PIX به SVG، PJPEG به SVG، PLASMA به SVG، PNG به SVG، PNG24 به SVG به SVG SVG، PNM به SVG، PPM به SVG، PS به SVG، PSD به SVG، PTIF به SVG، PWP به SVG، RAF به SVG، RAS به SVG، RGB به SVG، RGBA به SVG، RLA به SVG، SCT به SVG، SFW به SVG، SGI به SVG، SK به SVG، SK1 به SVG، SR2 به SVG، SRF به SVG، SUN به SVG، SVG به SVG، SVGZ به SVG، TGA به SVG به SVG، TIF SVG، TIM به SVG، TTC به SVG، TTF به SVG، TXT به SVG، VDA به SVG، VICAR به SVG، VID به SVG، VIFF به SVG، VST به SVG، WBMP به SVG، WEBV، SVG به SVG WMZ به SVG، WPG به SVG، X به SVG، X3F به SVG، XAML به SVG، XBM به SVG، XC به SVG، XCF به SVG، XFIG به SVG، XPM به SVG، XV به SVG به SVG، YWD به SVG، YCBCRA به SVG، YUV به SVG

ساخته شده بر روی راه حل های منبع باز مانند Autotrace، ImageMagick و اجزای مختلف گرافیکی لینوکس.

فرمت های تبدیل:

SVG - فایل های گرافیکی وکتور مقیاس پذیر
AI - فایل‌های Adobe Illustrator (بر اساس پست‌اسکریپت)
CGM - فایل های متافایل گرافیک کامپیوتری
WMF - فایل های متافایل ویندوز
SK - فایل های Sketch/Skencil
PDF - فرمت سند قابل حمل
EPS-PostScript
PLT - HPGL برای برش فایل های پلاتر

و همچنین: P2E، FIG، EMF، MIF، ER، DXF، EPD، CGM، oDR2D

تصویر SVG یک فرمت برداری اصلی برای نسل بعدی وب سایت ها است و به طور کامل با استانداردهای جدید HTML5 ادغام شده است. با Aurora SVG Viewer & Converter: می توانید به راحتی گرافیک های SVG را مشاهده کرده و تولیدات خود را به چندین فرمت تبدیل کنید.

ظهور HTML5 باعث استفاده بیشتر از تصاویر برداری با فرمت SVG شده است. اگر یک توسعه‌دهنده وب هستید، اکنون زمان مناسبی است که از بازی جلوتر باشید و گردش کار خود را با هر چیزی که تو نیاز داریبرای کار با تصاویر HTML5 و SVG. اولین قدم این است که یک کپی از تخفیف نرم افزار تبلیغاتی امروز را بگیرید، که برای کاربران مک و ویندوز در دسترس است!

نمایشگر و مبدل Aurora SVGسازماندهی، مشاهده و تبدیل تصاویر SVG را آسان می کند. با نمایشگر و مبدل Aurora SVG، از حالت نمایش تصاویر کوچک راحت و نمای پوشه ای که فوراً قابل تشخیص است لذت خواهید برد. اگر نیاز به تبدیل یک تصویر SVG به فرمت دیگری دارید، نمایشگر و مبدل Aurora SVGبه شما امکان می دهد تصاویر را به عنوان فایل های TIFF، PNG، JPB، BMP، GIF، TGA، XPM، PPM، XBM یا حتی PDF ذخیره کنید، روز را صرفه جویی می کند. حتی بهتر از آن، می توانید چندین فایل را به صورت دسته ای تبدیل کنید!

البته شما همیشه روی جزئیات کنترل کامل دارید نمایشگر و مبدل Aurora SVG. وضوح خروجی را تنظیم کنید، بخش هایی از تصاویر SVG را تبدیل کنید و کیفیت تبدیل را تنظیم کنید!

اسکرین شات ویندوز: اسکرین شات مک:

ویژگی های Aurora SVG Viewer & Converter:

1. پشتیبانی ویندوز و سیستم عامل مک

2. آسان انتخاب پوشهو نمایش تصویر کوچکحالت

3. به سرعت پیش نمایش تصاویر SVG یا تبدیل آنها. پشتیبانی می کند SVG و SVGZ.

4. مبدل SVG به فرمت های تصویری متعدد عبارتند از: tiff، png، jpg، bmp، gif، tga، xpm، ppm، xbm، و pdf.

5. تبدیل دسته ای، لیستی از تصاویر را برای تبدیل تهیه کنید و سپس در یک حرکت آنها را تبدیل کنید و در پوشه دیگری ذخیره کنید.

6. وضوح خروجی به راحتی با وضوح زوم آزاد تنظیم می شود. هر ناحیه از بوم SVG را انتخاب و تبدیل کنید.

7. تبدیل سفارشی هر منطقه ای که انتخاب می کنید: یک ناحیه از تصویر SVG را انتخاب کرده و تبدیل کنید.

8. مجموعه سریع از کیفیت تبدیل.

9. از Windows یا Mac OS دلخواه خود برای پیش نمایش سریع SVG یا انیمیشن ها و تبدیل دسته ای SVG به چندین فرمت تصویر استفاده کنید. برو جلو، امتحانش کن!

جوایز

نظر کاربر:

می خواستم به شما بگویم که چقدر از نرم افزار شما لذت می برم. من متن ساز سه بعدی خریدم الان انیمیشن ساز سه بعدی خریدم. هر دوی این برنامه ها پروژه های ویدیویی من را واقعا برجسته می کنند.

---- جان هاروات (ایالات متحده آمریکا)

این برنامه بسیار مفید به نظر می رسد. حتما دانلود میکنم و امتحان میکنم انیمیشن سه بعدی نیز بسیار مفید به نظر می رسد. شگفت‌انگیز است که چه تعداد عناوین نرم‌افزاری در bitsdujour معرفی می‌شوند که در غیر این صورت با آن‌ها مواجه نمی‌شدم.

من به تازگی آزمایش 3D Animation Maker را به پایان رساندم. وای من خیلی تحت تاثیر قرار گرفتم! من یکی از نمونه ها را به صورت avi صادر کردم و از کیفیت بسیار راضی هستم. از معامله متشکریم - خرید پس از آزمایش "بدون فکر" بود. قطعاً در آینده Presentation 3D را در نظر خواهم گرفت.

---- دان گدارد (ایالات متحده آمریکا)