ساده ترین راه Art Tracing - یک فایل را در 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 شبکه
  • تصویر TGA Truevision تارگا
  • فرمت بیت مپ قابل حمل PBM
  • فرمت هر نقشه قابل حمل PNM
  • فرمت نقشه خاکستری قابل حمل PGM
  • فرمت pixmap قابل حمل PPM
  • BMP ویندوز مایکروسافتتصویر بیت مپ

فرمت های خروجی:
  • svg گرافیک برداری مقیاس پذیر
  • eps پست اسکریپت کپسوله شده
  • Ai Adobe Illustrator
  • فرمت dxf DXF (بدون اسپلاین)
  • فرمت p2e pstoedit frontend
  • sk Sketch
  • شکل XFIG 3.2
  • فرمت متافیل پیشرفته emf
  • mif Frame Maker فرمت MIF
  • فایل Elastic Reality Shape
  • فرمت epd EPD
  • فرمت پی دی اف پی دی اف
  • cgm متافایل گرافیک کامپیوتری
  • dr2d IFF DR2D؟ قالب
  • به شما امکان می دهد تصاویر را به . می توانید یک فایل آپلود کنید یا پیوندی به یک تصویر ارائه دهید. امکان همپوشانی جلوه های دیجیتالی نیز وجود دارد.

در صورت تبدیل تصاویر بیت مپ (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 W به SVG، MSL به SVG، MSVG به SVG، MTV به SVG، MVG به SVG، NEF به SVG، NRW به SVG، ORF به SVG، OTB به SVG، OTF به SVG، PAL به SVG به SVG، PALM به SVG، SVG، PBM به SVG، PCD به SVG، PCDS به SVG، PCL به SVG، PCT به SVG، PCX به SVG، PDB به SVG، PDF به SVG، PDFA به SVG، PEF به SVG، PES به SVG، PFA PFB به SVG، PFM به SVG، PGM به SVG، PICON به SVG، PICT به SVG، PIX به SVG، PJPEG به SVG، PLASMA به SVG، PNG به SVG، PNG24 به SVG، PNGVG به PNG32 به SVG SVG، PPM به SVG، PS به SVG، PSD به SVG، PTIF به SVG، PWP به SVG، RAF به SVG، RAS به SVG، RGB به SVG، RGBA به SVG، RLA به SVG، RLE به SVG، SFW به SVG، SGI به SVG، SK به SVG، SK1 به SVG، SR2 به SVG، SRF به SVG، SUN به SVG، SVG به SVG، SVGZ به SVG، TGA به SVG، TIF به SVG به SVG، SVG، TTC به SVG، TTF به SVG، TXT به SVG، VDA به SVG، VICAR به SVG، VID به SVG، VIFF به SVG، VST به SVG، WBMP به SVG، WEBP به SVG، WMV به SVG، WMV به 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 , YCBCR به SVGVG به, در 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و می‌خواهید وقتی روی یکی از آیتم‌های منو می‌روید، رنگ متن و نماد تغییر کند. برای اینکه تعداد زیادی عکس تولید نشود، تصمیم گرفته شد svg را به کد تبدیل کرده و در سبک های CSS استفاده کنیم.

راهنمای کوتاه در مورد نحوه استفاده از SVG در CSS

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

به عنوان مثال، نماد فیس بوک ( نماد استانداردبا کمی تغییر).

در سایت https://jakearchibald.github.io/svgomg/ کلیک کنید SVG را باز کنیدیا فقط آیکون را به درگاه نمایش بکشید. در سمت چپ گوشه بالاییکلیک کد، کد را هایلایت کرده و سپس بر روی آن کلیک کنید نماد کپی، بنابراین کد svg-image خود را در بافر دریافت می کنیم.

چیزی مثل این:

سپس کد به دست آمده را در پنجره بالا قرار دهید، روی Converte کلیک کنید و تمام شده را دریافت کنید تصویر پس زمینه:

Background-image: 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 5 ساعت -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-0.017.005 - 0.017.005 3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

کپی کنید و در css خود استفاده کنید.

برای تغییر رنگ، fill="%23FFF" را تغییر می دهیم، اما به خاطر داشته باشید که %23 یک علامت # منظم است، یعنی fill="%23000" سیاه معمولی است (#000).

با adobe illustrator:

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

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

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

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

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

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

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

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

تبدیل somefile.png somefile.svg

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

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

ffmpeg -i somefile.mp3 somefile.ogg

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

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

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

بسته به اینکه آیا چرااگر می خواهید از png. به .svg تبدیل کنید، ممکن است نگران نباشید. تبدیل از .png (bitmap) به .svg (وکتور) در صورتی که با ابزارهای موجود آشنایی چندانی نداشته باشید یا اگر حرفه ای یک طراح گرافیک نیستید، می تواند دردسرساز باشد.

اگر کسی شما را بفرستد فایل بزرگبا کیفیت بالا(به عنوان مثال 1024x1024) می توانید اندازه آن را تقریباً به هر اندازه ای که می خواهید در GIMP استفاده کنید تغییر دهید. اگر رزولوشن (تعداد پیکسل در هر اینچ) خیلی کم باشد، اغلب با تغییر اندازه تصویر مشکلاتی وجود دارد. برای رفع این مشکل در GIMP می توانید:

  1. File -> Open: فایل png. شما
  2. Image -> Image Properties: وضوح و فضای رنگ را بررسی کنید. شما رزولوشنی در حدود 300 ppi می خواهید. در بیشتر موارد، شما می خواهید فضای رنگی RGB باشد.
  3. تصویر -> حالت: مقدار RGB را تنظیم کنید
  4. Image -> Scale Image: اندازه را به حال خود رها کنید و وضوح Y را روی 300 یا بیشتر تنظیم کنید. مقیاس ضربه.
  5. Image -> Scale Image: وضوح تصویر اکنون باید 300 باشد و اکنون می توانید اندازه تصویر را تقریبا به هر اندازه ای تغییر دهید.

به آسانی تغییر اندازه فایل .svg نیست، اما مطمئناً آسان‌تر و سریع‌تر از تبدیل png. به .svg اگر قبلاً دارید. تصویر بزرگکیفیت بالا.

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

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

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

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

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

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

گاهی اوقات لازم است 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 قرار می‌دهم. و به این نتیجه میرسیم.

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