এইচটিএমএলে এসভিজির আকার পরিবর্তন করছেন?

Question

সুতরাং, আমার এইচটিএমএলতে একটি এসভিজি ফাইল রয়েছে এবং আমি ফর্ম্যাটটি সম্পর্কে যা শুনেছি তা হ'ল এটি যখন আপনি জুম করবেন তখন এটি সমস্ত পিক্সেলিটেড হয় না।

আমি জেপেইগের সাথে জানি বা যা কিছু আমি এটি 50 বাই 50 আইকন হিসাবে সংরক্ষণ করতে পারি, তবে এটি চিত্র_সিসিআরটিতে নিজেই উচ্চতা এবং প্রস্থ নির্ধারণ করে 100 (100) দ্বারা 100 থাম্বনেল (বা 10 দ্বারা 10) হিসাবে এটি প্রদর্শন করুন ট্যাগ।

যাইহোক, এসভিজি ফাইলগুলি অবজেক্ট / এম্বেড ট্যাগগুলির সাথে ব্যবহৃত হবে এবং THOSE এর উচ্চতা বা প্রস্থ পরিবর্তন করলে ফলাফলের জন্য ছবিটির জন্য আরও স্থান বরাদ্দ হবে।

আপনি কোনও এসভিজি চিত্রটি ফাইল সিস্টেমে সঞ্চিত তার চেয়ে ছোট বা বৃহত প্রদর্শিত চান তা নির্দিষ্ট করার কোনও উপায় আছে কি?

Answer 1

.svgএকটি পাঠ্য সম্পাদক দিয়ে এটি ফাইল খুলুন (এটি কেবলমাত্র এক্সএমএল) এবং শীর্ষে এই জাতীয় কিছু সন্ধান করুন:

<svg ... width="50px" height="50px"...

প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি মুছুন; ডিফল্টগুলি 100% হয়, সুতরাং ধারক এটি যা দেয় তার প্রসারিত হওয়া উচিত।

Comments

হ্যাঁ এটি ঠিক, তবে আপনাকে 'ভিউবক্স' বৈশিষ্ট্যও যুক্ত করতে হবে (যেমন আপনার 50x50px উদাহরণে ভিউবক্স = "0 0 50 50"), অন্যথায় সামগ্রী সঠিকভাবে মাপতে না পারে (ধারক মাত্রার উপর নির্ভর করবে)। স্কোর স্বয়ংক্রিয়ভাবে কোডেডড / এসসিউর আপনার জন্য এটি করবে ।

— এরিক ডালস্ট্রোম

হুররে! যে সাহায্য! আমার কাছে ফাইলটিতে 100% ইতিমধ্যে জিনিস ছিল, এটি দেখা যাচ্ছে, তবে ভিউ বাক্সটি কী ছিল! দুজন কেই ধন্যবাদ!

— জেনি

এটি অন্য কারও কাছে সুস্পষ্ট না হলে, 'ভিউবক্স' সংবেদনশীল। এছাড়াও, আপনি যদি চিত্রটি ক্রপ করছেন তবে প্রথম দুটি স্থানাঙ্কগুলি হ'ল উপরের-বাম কোণে এবং দ্বিতীয় দুটি স্থানাঙ্কটি স্কেলিংয়ের আগে প্রস্থ এবং উচ্চতা ।

— বড় ম্যাকলার্জহিউজ

মনে রাখবেন যে উভয়ই <ডি স্টাইল = "প্রস্থ: 50px; উচ্চতা: 50px"> <এসভিজি ভিউবক্স = "0 0 1000 1000"> ... </ এসভিজি> </ ডিভি> এবং <এসভিজি ভিউবক্স = "0 0 1000 1000" শৈলী = "প্রস্থ: 50px; উচ্চতা: 50px"> ... </svg> কাজ করবে।

— ই

Answer 2

এগুলি চেষ্টা করুন:

1. অনুপস্থিত ভিউবক্সটি সেট করুন এবং এসভিজি ট্যাগে সেট উচ্চতা এবং উচ্চতার বৈশিষ্ট্যের উচ্চতা এবং প্রস্থ মান পূরণ করুন

2. তারপর দ্বারা কেবল ছবি আকার পরিবর্তন উচ্চতা এবং প্রস্থ সেটিং থেকে পছন্দসই শতাংশ মান। শুভকামনা।

3. preserveAspectRatio="X200Y200 meet(উদাহরণস্বরূপ 200px) সহ একটি নির্দিষ্ট দিক অনুপাত সেট করুন তবে এটি প্রয়োজনীয় নয়

যেমন

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Answer 3

আপনি ইমেজ ট্যাগ এবং আকারের ইমেজ ট্যাগে এসভিজি প্রদর্শন করে এটির আকার পরিবর্তন করতে পারেন

<img width="200px" src="lion.svg"></img>

Comments

<img> ব্যবহার করে আমি মনে করি যে সমস্যাটি হ'ল আপনি হ'ল <অবজেক্ট> ট্যাগটির ব্যর্থতা ক্ষমতা হারাতে পারেন (যা সংস্করণ 8 এবং নীচে আই ব্যবহারকারীদের জন্য প্রাসঙ্গিক হতে পারে)।

— নাথান ক্রুজ

Answer 4

ধারকটির প্রস্থ পরিবর্তন করা উত্স ফাইলের প্রস্থ এবং উচ্চতা পরিবর্তনের পরিবর্তে এটি ঠিক করে।

.SvgImage img{ width:80%; }

---

এটি svg এর আকার পরিবর্তন করার বিষয়টি আমার সমস্যার সমাধান করে। আপনার প্রয়োজনের ভিত্তিতে আপনি যে কোনও% দিতে পারেন।

Answer 5

আমি আমার এসভিজিতে সংযুক্তি viewBoxএবং preserveAspectRatioবৈশিষ্ট্যগুলি সবচেয়ে ভাল খুঁজে পেয়েছি । ভিউবাক্সে ফর্মটিতে এসভিজির সম্পূর্ণ প্রস্থ এবং উচ্চতা বর্ণনা করা উচিত 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Comments

এটি সৎভাবে সেরা বিকল্প। একটি যাদুমন্ত্র মত কাজ করে.

— জাস্টিন

Answer 6

নিম্নলিখিত কোড ব্যবহার করুন:

<g transform="scale(0.1)">
...
</g>

Answer 7

এখানে সীমানা পাওয়ার উদাহরণ রয়েছে svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

শেষে আপনি নম্বর পেয়েছেন যে ভিউবক্সটি সঠিকভাবে সেট করতে আপনি এসভিজিতে প্লাগ করতে পারেন। তারপরে অভিভাবক ডিভের জন্য যে কোনও CSS ব্যবহার করুন এবং আপনার কাজ শেষ।

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Answer 8

আমার এইচটিএমএলতে একটি এসভিজি ফাইল রয়েছে [....] আপনি যে এসভিজি চিত্রটি ফাইল সিস্টেমের মধ্যে সঞ্চিত তার চেয়ে ছোট বা বৃহত প্রদর্শিত চান তা নির্দিষ্ট করার কোনও উপায় আছে?

অন্যান্য সৃজনশীল কাজের মতো এসভিজি গ্রাফিক্সও বেশিরভাগ দেশে কপিরাইট আইনে সুরক্ষিত থাকে। এখতিয়ার, কাজের লাইসেন্সের উপর নির্ভর করে বা আপনি কপিরাইট ধারক কিনা তা আপনি কপিরাইট আইন লঙ্ঘন না করে এসভিজি সংশোধন করতে পারবেন না , বিশ্বাস করুন বা না করুন।

তবে আইনগুলি কৌতূহলোদ্দীপক বিষয় এবং কখনও কখনও আপনি কেবল বিষ্ঠা পেতে চান। অতএব আপনি নিজের এইচটিএমএল এর মধ্যে বৈশিষ্ট্যের সাথে ট্যাগটি ব্যবহার করে নিজেই কাজটি পরিবর্তন না করে গ্রাফিকের স্কেল সামঞ্জস্য করতে পারেন ।imgwidth

আকার নির্দিষ্ট করতে একটি বাহ্যিক HTTP অনুরোধ ব্যবহার করে:

<img width="96" src="/path/to/image.svg">

ডেটা ইউআরআই ব্যবহার করে মার্কআপে আকার নির্দিষ্ট করা :

<img width="96" src="data:image/svg+xml,...">

যে কোনও আকারের উপযোগী এসভিজি ফ্যাভিকন চিত্রগুলি তৈরি করতে ডেটা ইউআরআইয়ের জন্য এসভিজিগুলিকে অনুকূল করা যেতে পারে :

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">