আমি কি এসভিজি পাঠ্যকে পাথে রূপান্তর করতে পারি তবে গ্লাইফগুলি পুনরায় ব্যবহার করতে পারি?


14

আমার এতে একটি এসভিজি রয়েছে যাতে এতে ভারী পাঠ্য রয়েছে। এটি একটি কার্পার্ক মানচিত্র যা স্পেস নম্বর লিখিত আছে। আমি এটি একটি ওয়েব ব্রাউজারে প্রদর্শন করি এবং ফায়ারফক্সে একটি দুর্দান্ত সামান্য বাগের জন্য ধন্যবাদ , ব্রাউজারটি পাঠ্যটিকে ভুলভাবে উপস্থাপন করে। বু।

তাই আমি পাঠ্যটিকে পাথে রূপান্তরিত করেছি। আমরা প্রায় 4000 আলাদা আলাদা লেবেলের কথা বলছি। সম্ভবত 15,000 নতুন আকার এখন তারা ভেক্টর। এটি 4 এমবি। সাধারণত আপনি তর্ক হতে পারে এই কম্প্রেশন থেকে নিজেকে ধার কিন্তু আমি আছে ইন-লাইন HTML- এ এই করা SVG । আমি গতিশীলভাবে সিএসএসের পরিবর্তনগুলি যুক্ত করছি এবং আমার পক্ষে ক্রস-ব্রাউজার সমর্থন করার একমাত্র উপায়। যাইহোক যাইহোক, এর কাঁচা স্কাউন্ডস আউটপুটটি কার্যকর হতে খুব বড়।

আমাকে এখানে কী আঘাত করে তা হল এই সমস্ত স্থান নম্বরগুলি সাধারণ গ্লাইফগুলি ভাগ করে। নয়টি দিয়ে জিরো। আমি কেন প্রতিটি সংখ্যার প্রতিটি উদাহরণের জন্য একটি আকার সংজ্ঞা অন্তর্ভুক্ত করছি ? আমি কি এগুলি ডি-নকল করতে পারি?

আমি ইনস্কেপ ব্যবহার করছি তবে আমি পরামর্শের জন্য উন্মুক্ত।


আপনি এসভিজি ফাইলটি ভাগ করে নিতে পারেন এমন কোনও সুযোগ যাতে আমরা এটি ব্যবহার করতে পারি?
জনবি

1
বাগটি হুবহু (স্ক্রিনশট) কী এবং আপনি কীভাবে এটি ব্রাউজারে রফতানি এবং লোড করছেন? পাঠ্য উপাদানগুলিকে ঠিক করতে / প্রতিস্থাপন করার জন্য আপনি কেবল কয়েকটি সিএসএস স্টাইলিং বা পৃষ্ঠায় একটি ছোট স্ক্রিপ্ট দিয়ে এটি ঠিক করতে পারেন এমন একটি ভাল সুযোগ রয়েছে। যদি এটি একটি গতিশীল মানচিত্র প্রদর্শন হয় তবে আপনি এটি একটি আসল মানচিত্রে রূপান্তর করতে চাইতে পারেন - বেশিরভাগ ব্রাউজার ম্যাপিং লাইব্রেরি (এবং অনেকগুলি ডেটা-ভিত্তিক) লেবেলিংয়ের জন্য দুর্দান্ত সমর্থন রাখে।
brichins

1
দুঃখিত, এসভিজি ভাগ করার জন্য আমার নয় (এটি ক্লায়েন্টের অন্তর্গত) তবে বাগটি সম্পর্কে জানা গেছে । এর মূল অর্থ এসভিজির হরফগুলি একটি পয়েন্ট ছাড়বে না ... হাজার হাজার পার্কিং স্পেস সহ আপনি যদি কোনও মানচিত্রে জুম বের করেন তবে এটি একটি গুরুতর সমস্যা । এগুলি (উদাঃ) ~ 0.08pt হওয়া উচিত এবং এগুলি আসলে 13 পিটি হয়।
অলি

1
আপনি ভুল বাগ সংখ্যা পেয়েছেন, আপনি আসলে খুঁজছেন এই এক
রবার্ট Longson

আপনি এটি কোনও উপসেটে পরীক্ষা করতে চাইতে পারেন, তবে কি path|simplifyআপনাকে কিছুটা সহায়তা করতে পারেন? একটি ছোট হাতের "গুলি" একটি 28 পয়েন্টে রূপান্তরিত করে, এটিকে ফসলকে 17 এ সরল করুন এবং সরলীকৃত এবং অপ্রচলিত সংস্করণগুলিকে ওভারলেল করে এমনকি জুম করা হয়েছে যাতে একটি "গুলি" স্ক্রিনটি পূরণ করে কোনও পার্থক্য নেই।
ক্রিস এইচ

উত্তর:


6

<use>উপাদান আপনি নথিতে অন্যত্র সংজ্ঞায়িত বস্তু পুনরায় ব্যবহার করতে পারবেন। উদাহরণস্বরূপ, আপনি প্রতিটি গ্লাইফকে একটি হিসাবে সংজ্ঞায়িত করতে পারেন <symbol>এবং তারপরে তাদের একাধিকবার পুনরায় ব্যবহার করতে পারেন। এখানে এটি সম্পর্কে একটি চমৎকার নিবন্ধ আছে: কাঠামোকরণ, গোষ্ঠীবদ্ধ, এবং SVG মধ্যে উল্লেখ - <g>, <use>, <defs>এবং <symbol>উপাদানসমূহ

আমি কীভাবে সরাসরি ইনসক্যাপে এটি করব তা জানি না, যদিও - বিশেষত আপনার কাছে ইতিমধ্যে পাঠ্য হিসাবে থাকা একগুচ্ছ পাঠ্যের জন্য নয়। এসভিজি পোস্ট-প্রক্রিয়া করার জন্য আপনাকে একটি স্ক্রিপ্ট লিখতে হতে পারে এবং পুনরায় ব্যবহার করা যেতে পারে এমন সমস্ত পাথগুলি খুঁজতে হবে।


<use>আমি যা ভাবছিলাম যখন আমি এই জিজ্ঞাসা করলেন, স্ক্রিপ্টিং কেমন ছিল। নির্বোধ মনে হচ্ছে নিকট-অভিন্ন মার্কআপের ডি-সদৃশ করার মতো কিছুই নেই।
অলি

@ অলি অভিন্ন চিহ্নআপ ছাঁটাই এমনকি কিছুই ছিল না ; আমাকে আমার নিজের লিখতে হয়েছিল (এবং একই সাথে আমি বাইট বলতে চাই; আমি সেগুলি ধুয়েছি এবং হ্যাশগুলির তুলনা করছি)
ক্রিস এইচ

মধ্যাহ্নভোজন নিয়ে আমার ভাবনা ছিল, এবং এটি আমার কাছে মনে হয় ইঙ্কস্কেপের মধ্যে (অজগর) স্ক্রিপ্টটি যাওয়ার পথ হবে। স্ক্রিপ্টটি পাঠ্য হিসাবে পাঠ্যটি দিয়ে শুরু হবে, এবং এর উল্লেখগুলির সাথে এটি প্রতিস্থাপন করবে <symbol>(বা দেখে মনে হচ্ছে আপনি <def>নিজের পাঠ্য-টু-পাথ গ্লাইফগুলি পারেন
ক্রিস এইচ

4

কিছু সংক্ষেপণ বিকল্প উপলব্ধ রয়েছে যা সাফল্যের বিভিন্ন ডিগ্রী সরবরাহ করবে। সেগুলি পরীক্ষা করার জন্য, আমি একটি আর্টওয়ার্ক ফাইল তৈরি করেছি যাতে সম্পূর্ণরূপে প্রচুর বারবার লেখা থাকে। আন-প্রসারিত, ফাইলের আকার 13.8 কেবি। প্রসারিত, ফাইলের আকার 1.42 মেগাবাইট

ভাল বিকল্প: এসভিজিজেড - 46.5 কেবি ব্যবহার করুন

এসভিজিজেড হিসাবে প্রসারিত শিল্পকর্ম সংরক্ষণ করে আমাকে 46.5 কেবি এর একটি আউটপুট ফাইল দেয় যা স্ট্যান্ডার্ড এসভিজির তুলনায় উল্লেখযোগ্যভাবে ছোট। সমর্থনটি ভিন্ন হতে পারে তবে নোট করুন ।

আরও ভাল বিকল্প: ঝাঁকুনির সাথে সংকোচন করুন - 21.1 কেবি

স্কোর এমন একটি সরঞ্জাম যা আপনার জন্য আপনার এসভিজি ফাইলটি স্ক্রাব করে এবং অনুকূলিত করবে। "সর্বাধিক সংক্ষেপণ" কমান্ডটি ব্যবহার করে scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, প্রসারিত শিল্পকর্মটি 21.1 কেবি কমানো হয়েছে। মূল আন-প্রসারিত ফাইলের আকার থেকে খুব বেশি দূরে নয়!


3
স্কাউরিং সংকোচিত হয় না, এটি কেবল আবর্জনা সরিয়ে দেয় এবং যখন এটি আমার পক্ষে যথেষ্ট পরিমাণে ভাল কাজ করে ( বিপুল সংখ্যক বস্তু দেওয়া হয় ), আমার "4 এমবি" পোস্ট-স্কোর ছিল। সংকুচিত বিষয়বস্তু দুর্দান্ত হবে তবে - এবং আমার এটি আগে উল্লেখ করা উচিত — ব্রাউজার টার্গেটিং ইস্যুগুলির জন্য আমাকে এসভিজিকে ইনলাইন করতে হবে (এবং ফ্রন্ট্যান্ডেড ম্যানিপুলেশন প্রয়োজনীয়তাও)। আমি জানি, আমি জানি, এটি বেদনাদায়ক তবে আমার বিশ্বাস করুন যখন আমি বলি যে এই মুহূর্তে এটি আমাকে আরও বেশি আঘাত করছে ডি:
অলি

আমার বলা উচিত ছিল, এর ভয়াবহ অংশটি scourসংকুচিত হয় না। এটা করতে পারেন এছাড়াও আপনার জন্য gzip, কিন্তু আইডি এবং হোয়াইটস্পেস minification কাপড় তার প্রধান কোঁচ মাধ্যমে ফাইল নিক্ষেপ করা।
অলি

@ অলি ঠিক, অতএব আমার "অপ্টিমাইজ" শব্দের যত্ন সহকারে পছন্দ করুন :) এটি এমন এক জাঁকজমকপূর্ণ যে আপনার ফাইলটি ইতিমধ্যে স্কোর করা হয়েছে ... অ্যাক!
জনবি

আমি ইলাস্ট্রেটারের চারপাশে কিছুটা গোলমাল করেছি; এর এসভিজি আউটপুট প্রতীকগুলি সম্মান করে। এখানে একটি দ্রুত উদাহরণ । এটি বেশ কিছুটা সময় লাগবে, তবে আপনি সম্ভবত একটি ইলাস্ট্রেটর স্ক্রিপ্ট তৈরি করতে সক্ষম হবেন যা আপনার পাঠ্যকে পৃথক অক্ষরগুলিতে বিভক্ত করে সিম্বলগুলি দিয়ে প্রতিস্থাপন করবে। সবচেয়ে বড় বাধা আমি দেখতে পাচ্ছি ঘূর্ণন নিয়ে কাজ করা। যদি সমস্ত পাঠ্য এক্স অক্ষের সাথে সমান্তরাল হয় তবে এটি কঠিন বলে মনে হচ্ছে না, তবে কোনও কোণে পাঠ্য নিয়ে কাজ করা একটি চ্যালেঞ্জ হতে পারে। অবশ্যই, আপনার কাছে ইলাস্ট্রেটর উপলভ্য না থাকলে সেগুলি খুব কার্যকর নয়
জনবি

3

এটি একটি ব্রাউজার বা সার্ভার সমাধানে solution

এসভিজি ফাইলগুলি অনুকূলকরণের বিভিন্ন উপায় রয়েছে। আপনি ইতিমধ্যে এটি মোটামুটি কিছু করেছেন বলে মনে হচ্ছে।

কয়েকটি সংস্থান যা আমি খুব দরকারী পেয়েছি তা হ'ল একটি সিএসএস-ট্রিকস নিবন্ধ যা খুব নির্দিষ্ট বিশদটিতে ফোকাস করে। এবং বিশেষত, যে সরঞ্জামটি এটি এসভিজিও ব্যবহার করে

আপনার যদি অনেকগুলি, বারবার পাথ থাকে তবে আমি গতিশীল আকারগুলি তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করার বিষয়টি বিবেচনা করব। এখানে একটি উদাহরণ আছে । এক দিক হ'ল প্রতিটি গ্লাইফের জন্য একটি সংজ্ঞায়িত ফাংশন থাকতে পারে এবং কেবলমাত্র সেই ফাংশনের জন্য একটি অনুরোধের মাধ্যমে তৈরি করা svg উপাদানটির মধ্যে প্রতিটি পাথ থাকে। অথবা আপনার ইনলাইন এসভিজি তৈরি করতে একটি পুরো স্ট্রিং এবং / অথবা আর্গুমেন্টের অ্যারে নিন। এটি অবশ্যই প্রত্যাশা করে যে আপনার পথগুলি ফাংশনের অনুরোধ করার জন্য কোডের দৈর্ঘ্যের চেয়ে দীর্ঘ হবে (বেশ সহজ অনুমান)।


1
যদিও এই উত্তরটি একাধিক সম্ভাব্য সমাধান উপস্থাপন করে, এসভিজিও সবচেয়ে আকর্ষণীয় বলে মনে হয়। এটি অপ্টিমাইজ করার জন্য .svg ফাইলেও চালানো যেতে পারে। তবে এটি বর্তমানে পথ প্রতিলিপি করতে পারে বলে মনে হয় না। যদি প্রশ্নকর্তা যেভাবেই কাস্টম স্ক্রিপ্টিংটি শেষ করেন, এসভিজিওতে উন্নত হিসাবে এটি করা ভাল ধারণা হতে পারে।
jpa

@ জেপিএ (বা যখন) পাথগুলিতে রূপান্তরিত করার আগে ছাড়িয়ে যাওয়ার উপায় হবে অবশ্যই। পাঠ্য চর "1" এর সমস্ত দৃষ্টান্ত প্রতিস্থাপন করুন <use xlink:href="#digit_one">যেখানে digit_oneএকটি পথ রয়েছে
ক্রিস এইচ

@ ক্রিশাহ আমি দেখতে পাচ্ছি না কেন পরে কেন কেউ ছাড় দিতে পারেনি। প্রারম্ভিক মুহুর্তে উত্পন্ন সমস্ত পাথকে কেবল স্বাভাবিক করুন, হ্যাশ নিন, পাথটি ইতিমধ্যে ঘটেছে কিনা তা সন্ধান করতে এটি ব্যবহার করুন। অবশ্যই, মার্জিত হিসাবে নয়, তবে কাজ করা উচিত এবং সমস্ত পাঠ্য বিন্যাস যুক্তি যুক্ত করে পুনরায় প্রতিস্থাপন / নির্ধারণের চেয়ে এটি কার্যকর করা সহজ হতে পারে।
jpa

@ জেপা আপনি পারতেন, তবে উত্সকে সাধারণীকরণ করা হলে রাউন্ডিং ত্রুটির সাথে ত্রুটি মেলে না match আমি যে স্ক্রিপ্টটির কথা ভাবছি তাতে অক্ষরগুলির পাথগুলি নির্দিষ্ট করে দেওয়ার জন্য ইনস্কেসের পাঠ্য-থেকে-পাথকে কল করা হবে তবে তারপরে তাদের মাস্টার্সের সেটগুলির সাথে রেফারেন্স সহ প্রতিস্থাপন করুন।
ক্রিস এইচ

@ জেপিএ এবং রাউন্ডিং ত্রুটিগুলি আসল। খেলনার উদাহরণে শূন্যের প্রথম চতুর্ভুজ বক্ররেখ ষষ্ঠ দশমিক জায়গায় 1 দ্বারা পৃথক হয় - হ্যাশিং আপ স্ক্রু যথেষ্ট
ক্রিস এইচ

2

আপনার স্ক্রিপ্টটি যা করা উচিত তা এখানে একটি উচ্চ স্তরে। আপনার পছন্দসই ভাষা এবং পরিবেশ নির্দ্বিধায় অনুভব করুন, এটি একটি যুক্তির জন্য কেবল একটি সূচনা পয়েন্ট যা আপনাকে যা খুঁজছে তা দেওয়া উচিত।

  • এসভিজির এক্সএমএলে সমস্ত পাঠ্য উপাদানগুলির মধ্য দিয়ে লুপ করুন এবং যেগুলিতে সংখ্যাযুক্ত পাঠ্য রয়েছে (পার্কিং স্পটগুলি রয়েছে, আপনার এসভিগিতে আরও পাঠ্য রয়েছে কিনা তা আপনি নির্দিষ্ট করেন না), স্বয়ংক্রিয়ভাবে ইনস্কেপ দ্বারা তৈরি আইডিটিকে সেই পার্কিংয়ের সাথে একটি স্ট্রিংয়ে পরিবর্তন করুন স্পট এর নম্বর ইনস্কেপকে কেবল অনন্য আইডি প্রয়োজন, এটি অ-বর্ণনামূলক আইডি উত্পন্ন করে তবে অন্য সফ্টওয়্যার দ্বারা তৈরি আইডি বা ব্যবহারকারী দ্বারা ম্যানুয়ালি তৈরি বা পরিবর্তিত আইডিগুলিকে সম্মান করে এবং পরিবর্তন করে না।
  • কোনও টেবিলের মধ্যে প্রতিটি পার্কিং স্পটের টেক্সট এলিমেন্টের এক্স & ওয়্যার স্থানাঙ্ক store
  • ইনস্কেপে থাকুক বা স্ক্রিপ্টিং করেই হোক, সমস্ত পার্কিং স্পট পাঠ্যকে পথে রূপান্তর করুন।
  • 0-9 সংখ্যার জন্য এসভিজি ফাইলটিতে <defs>প্রতিটি সংখ্যার জন্য পথের তথ্য সংজ্ঞায়নের জন্য একটি উপযুক্ত বিভাগ যুক্ত করুন।
  • সমস্ত <g>পার্কিং স্পটগুলির মধ্য দিয়ে লুপ করুন এবং এটিকে প্রতিস্থাপন করুন<use xlink:href="#digit" x=x y=y />
  • মুনাফা

আপনাকে কিছু জটিলতাগুলির মুখোমুখি করতে পারি যেগুলি আপনাকে মোকাবেলা করতে হবে এবং সেগুলির সাথে শুভকামনা।

  • লুপটি পার্কিং স্পটগুলির স্ট্রিংকে 2 ডিজিট বা তার বেশি সংখ্যায় বিভক্ত করতে হবে এবং প্রথম অঙ্ক এবং পরবর্তী অঙ্কগুলির মধ্যে যথাযথ ব্যবধান জটিল হতে পারে; এটি আপনার ব্যবহার করা ফন্টগুলির উপর খুব বেশি নির্ভর করবে।
  • পার্কিং স্পটগুলি কোন দিকে রয়েছে তা নির্দিষ্ট করে না বা সেগুলি এমনকি বাঁকা সেটআপগুলিতে থাকলে। ম্যানুয়াল এক্স, ওয়াইটি 2 ডিজিটের সংখ্যার এবং তার বেশি সংখ্যক অফসেটের কারণে, আপনার কোনও পার্কিং স্পটের 'ওরিয়েন্টেশন' নির্ধারণ করতে এবং প্রথম থেকে পৃথক অঙ্কের পৃথক পৃথক পাথ কীভাবে সঠিকভাবে স্পেস করবেন তা অতিরিক্ত যুক্তির প্রয়োজন হতে পারে।

আশাকরি এটা সাহায্য করবে. শুভকামনা

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.