HTML में SVG का आकार बदलना?

157

इसलिए, मेरे पास HTML में एक एसवीजी फ़ाइल है, और एक चीज जो मैंने प्रारूप के बारे में सुनी है, वह यह है कि जब आप इसमें ज़ूम करते हैं तो यह सभी पिक्सेलयुक्त नहीं होता है।

मैं एक jpeg के साथ जानता हूं या जो कुछ भी मैं इसे 50 द्वारा 50 आइकन के रूप में संग्रहीत कर सकता था, फिर वास्तव में इसे एक (बल्कि पिक्सेलयुक्त) 100 के रूप में 100 थंबनेल (या 10 से 10) के रूप में प्रदर्शित करता हूं, मैन्युअल रूप से image_src में ऊंचाई और चौड़ाई सेट करके। टैग।

हालाँकि, SVG फ़ाइलों का उपयोग ऑब्जेक्ट / एम्बेड टैग के साथ किया जाता है, और THOSE की ऊँचाई या चौड़ाई बदलने से चित्र के लिए अधिक स्थान आवंटित हो जाता है।

यह निर्दिष्ट करने का कोई तरीका है कि आप एक एसवीजी छवि को छोटे या बड़े प्रदर्शित करना चाहते हैं जो वास्तव में फ़ाइल सिस्टम में संग्रहीत है?

html svg

— जेनी
स्रोत

178

.svgएक टेक्स्ट एडिटर के साथ अपनी फ़ाइल खोलें (यह सिर्फ XML है), और शीर्ष पर कुछ इस तरह देखें:

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

चौड़ाई और ऊंचाई विशेषताओं को मिटा दें; डिफॉल्ट 100% हैं, इसलिए कंटेनर को जो भी अनुमति देता है, उसे खिंचाव देना चाहिए।

— Amadan
स्रोत

75

हाँ यह सही है, लेकिन आपको अपने 50x50px उदाहरण में एक 'व्यूबॉक्स' विशेषता (जैसे व्यूबॉक्स = "0 0 50 50") भी जोड़ने की आवश्यकता है, अन्यथा सामग्री ठीक से स्केल नहीं हो सकती है (कंटेनर आयामों पर निर्भर करेगी)। स्‍कॉर आपके लिए यह स्‍वचालित रूप से करेगा, codedread.com/scour ।

— एरिक डहलस्ट्रम

हुर्रे! इससे मदद मिली! मेरे पास फ़ाइल में पहले से ही 100% चीजें थीं, यह पता चला, लेकिन दृश्य बॉक्स की कुंजी थी! तुम दोनों को धन्यवाद!

— जेनी

26

यदि यह किसी और के लिए स्पष्ट नहीं है, तो 'व्यूबॉक्स' संवेदनशील है। इसके अलावा, पहले दो निर्देशांक ऊपरी-बाएँ कोने हैं यदि आप छवि को क्रॉप कर रहे हैं, और दूसरे दो निर्देशांक स्केलिंग से पहले चौड़ाई और ऊँचाई हैं ।

— बिग मैक्लेरहज

1

ध्यान दें कि दोनों <div style = "width: 50px; height: 50px"> <svg viewBox = "0 0 1000 1000"> ... </ svg> </ div> और <svg viewBox = "0 0 1000 1000" शैली = "चौड़ाई: 50px; ऊँचाई: 50px"> ... </ svg> काम करेगा।

— विधवा हुई

48

इन्हें कोशिश करें:

लापता व्यूबॉक्स सेट करें और svg टैग में सेट ऊंचाई और ऊंचाई विशेषताओं की ऊंचाई और चौड़ाई मूल्यों में भरें
फिर वांछित प्रतिशत मानों के लिए ऊंचाई और चौड़ाई निर्धारित करके चित्र को स्केल करें । सौभाग्य।
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">

— लोरेंज लो सॉर
स्रोत

24

आप इसे इमेज टैग और साइज इमेज टैग में svg प्रदर्शित करके आकार बदल सकते हैं

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

— तनवीर
स्रोत

1

<Img> का उपयोग करने के साथ मुझे जो समस्या है, वह यह है कि आप <ऑब्जेक्ट> टैग की विफलता क्षमताओं को खो देते हैं (जो कि संस्करण 8 और उससे नीचे के IE उपयोगकर्ताओं के लिए प्रासंगिक हो सकता है)।

— नाथन क्रूस

10

स्रोत फ़ाइल की चौड़ाई और ऊंचाई को बदलने के बजाय कंटेनर की चौड़ाई को बदलना भी इसे ठीक करता है।

.SvgImage img{ width:80%; }

यह svizing फिर से मेरे मुद्दे को ठीक करता है। आप अपनी आवश्यकता के आधार पर कोई भी% दे सकते हैं।

— neuro_tarun
स्रोत

8

मैंने अपने एसवीजी को जोड़ना viewBoxऔर उन्हें जोड़ना सबसे अच्छा पाया है preserveAspectRatio। व्यूबॉक्स को फॉर्म में SVG की पूरी चौड़ाई और ऊंचाई का वर्णन करना चाहिए 0 0 w h:

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

— duhaime
स्रोत

2

ईमानदारी से यह सबसे अच्छा विकल्प है। एक जादू की तरह काम करता है।

— जस्टिन

6

निम्नलिखित कोड का उपयोग करें:

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

— क्रिस पी
स्रोत

4

यहाँ सीमा का उपयोग करने का एक उदाहरण दिया गया है svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

अंत में आपको संख्याएँ मिलती हैं जो आप व्यू बॉक्स को ठीक से सेट करने के लिए svg में प्लग कर सकते हैं। फिर पैरेंट डिव पर किसी भी सीएसएस का उपयोग करें और आपका काम हो गया।

 // 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);

— लॉरेंस व्हाइटसाइड
स्रोत

1

मेरे पास HTML में एक एसवीजी फ़ाइल है [....] क्या यह निर्दिष्ट करने का कोई तरीका है कि आप एक एसवीजी छवि को छोटे या बड़े प्रदर्शित करना चाहते हैं जो वास्तव में फ़ाइल सिस्टम में संग्रहीत है?

एसवीजी ग्राफिक्स, अन्य रचनात्मक कार्यों की तरह, अधिकांश देशों में कॉपीराइट कानून के तहत संरक्षित हैं। अधिकार क्षेत्र के आधार पर, कार्य का लाइसेंस या आप कॉपीराइट धारक हैं या नहीं, आप कॉपीराइट कानून का उल्लंघन किए बिना एसवीजी को संशोधित करने में सक्षम नहीं हो सकते हैं , यह विश्वास है या नहीं।

लेकिन कानून बहुत मुश्किल विषय हैं और कभी-कभी आप सिर्फ बकवास करना चाहते हैं। इसलिए आप अपने HTML में विशेषता के साथ टैग का उपयोग करके कार्य को संशोधित किए बिना ग्राफ़िक के पैमाने को समायोजित कर सकते हैं ।imgwidth

आकार निर्दिष्ट करने के लिए बाहरी HTTP अनुरोध का उपयोग करना:

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

डेटा यूआरआई का उपयोग करके मार्कअप में निर्दिष्ट आकार :

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

SVG को किसी भी आकार के लिए उपयुक्त SVG फ़ेविकॉन चित्र बनाने के लिए डेटा URI के लिए अनुकूलित किया जा सकता है :

<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">

— जोश हबदास
स्रोत