मैं एक जिद्दी एसवीजी को <ऑब्जेक्ट> टैग के साथ कैसे स्केल करता हूं?

114

मेरे पास कुछ एसवीजी फाइलें हैं जो निर्दिष्ट करती हैं widthऔर heightसाथ ही viewboxइस तरह हैं:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

लेकिन मैं उन्हें किस आकार में ब्राउज़र में प्रदर्शित करता हूं, यह मैं तय करता हूं। मैं उन्हें छोटा चाहता हूं और कोशिश कर रहा हूं:

<object width="400" data="image.svg"></object>

लेकिन फिर मुझे स्क्रोलबार्स दिखाई देते हैं।

यह काम करता है अगर मैं सेट करने के लिए SVG फ़ाइलें बदलने widthऔर heightकरने के लिए 100%के बजाय, लेकिन मैं क्या आकार एसवीजी फ़ाइल में उपयोग किया जाता है चाहे HTML में आकार तय करना चाहते हैं। क्या यह संभव है ?

html svg

— Zitrax
स्रोत

मैं उलझन में हूँ, अंतिम वाक्य उस समाधान की तरह है जिसे आप खोज रहे हैं? SVG की चौड़ाई / ऊँचाई को 100% / 100% पर सेट करें, इसे ड्रा करने के लिए क्षेत्र को परिभाषित करने के लिए HTML तक छोड़ देता है?

— मार्क

3

समस्या यह है कि मुझे लाइब्रेरी में इसे बदलने का कोई तरीका नहीं मिला है, जिसका उपयोग मैं svg फाइलें उत्पन्न करने के लिए करता हूं। और यह मेरे लिए समझ में आता अगर मैं इसे html से ओवरराइड कर सकता था। तो मूल रूप से मुझे आश्चर्य है कि अगर svg फ़ाइलों को बदलने की तुलना में एक और समाधान है।

— ज़िट्रैक्स

161

<svg>इसे पूरा करने के लिए आप टैग में "preserveAspectRatio" और "viewBox" विशेषताएँ जोड़ सकते हैं ।

एक संपादक में .svg फ़ाइल खोलें और <svg>टैग ढूंढें । उस टैग में, निम्नलिखित विशेषताएँ जोड़ें:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

व्यूबॉक्स के लिए कुछ चौड़ाई के साथ {चौड़ाई} और {ऊंचाई} बदलें। मैंने एसवीजी टैग की "चौड़ाई" और "ऊंचाई" विशेषताओं से मूल्यों का उपयोग किया और यह काम करने लगा।

एसवीजी बचाओ और इसे अब उम्मीद के मुताबिक पैमाने पर होना चाहिए।

मुझे यह जानकारी यहाँ मिली:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

— जिम केलर
स्रोत

2

#प्रतिष्ठित सभी आपको इसे जोड़ना होगा। संरक्षित करें अनुपात = "xMinYMin मिलो"

— समेंत करें।

4

@samccone: ऐसा लगता है कि preserveAspectRatio="xMinYMin meet"मेरे लिए बस इतना ही काफी नहीं था। मुझे viewBoxउत्तर में उल्लेखित जानकारी भी प्रदान करने की आवश्यकता है । अफ़सोस की बात है!

— फ्रेरिच राबे

1

आप यह भी कर सकते हैं preserveAspectRatio="none"यदि आप svg को मनमाने तरीके से बाहर निकालना चाहते हैं।

— मैट क्रिंकलाव-वोग्ट

5

उसी मुद्दे के लिए मत पड़ो जैसा कि मैंने किया था: "व्यूबॉक्स"! = "व्यूबॉक्स" :)

— डॉÜ

इसके अलावा, मैं करने के लिए वास्तविक चौड़ाई और ऊंचाई विशेषता सेट करने के लिए किया था 100%के रूप में इस जवाब में कहा गया है।

— कॉमफ्रीक

35

यहां दिए गए उत्तरों में से किसी ने भी मेरे लिए काम नहीं किया जब मैंने 2009 में यह वापस पूछा। जैसा कि मैंने अब एक ही मुद्दा फिर से देखा था कि मैंने <img>एक svg के साथ टैग और चौड़ाई का उपयोग करके ठीक काम करता है।

<img width="400" src="image.svg">

— Zitrax
स्रोत

6

यह अन्य विकल्पों की तुलना में बहुत सरल है! किसी के उत्सुक होने की स्थिति में, यहां एक तालिका है जिसमें ब्राउज़र एसवीजी के <img> टैग को संभाल सकते हैं ।

— dimo414

5

यदि एसवीजी में कोई हाइपरलिंक नहीं हैं, तो यह सबसे अच्छा तरीका हो सकता है, अन्यथा, आईएमजी अपर्याप्त है, और एक को अभी भी एम्बेड के साथ वैकल्पिक उपयोग करना चाहिए।

— sdupton

12

जब आप उपयोग करते हैं <img>तो आप लिंक, जावास्क्रिप्ट आदि के साथ सभी अन्तरक्रियाशीलता खो देते हैं

— gilly3

5

लघु: img तत्व स्वयं बंद होना चाहिए, अर्थात <img width="400" src="image.svg"/>।

— Jan Aagard

4

@ जानआगार्ड: एक्सएचटीएमएल को छोड़कर आईएमजी टैग को बंद करना आवश्यक नहीं है ।

— पीटर वी। मॉर्क

9

आप जावास्क्रिप्ट का उपयोग करके एम्बेडेड svg में पहुँच सकते हैं:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

चूँकि आपके svg में पहले से ही एक viewBox है, इसलिए फ़ायरफ़ॉक्स को आपके दस्तावेज़ में 400 पिक्सेल चौड़ाई में viewBox में 576 पिक्सेल की चौड़ाई को स्केल करना चाहिए। अन्य svgs को विज्ञापित चौड़ाई और ऊंचाई से प्राप्त नए व्यूबॉक्स से लाभ हो सकता है (ये अक्सर समान संख्याएं होती हैं)। अन्य ब्राउज़र अलग svg tweaks से लाभ उठा सकते हैं।

— joeforker
स्रोत

1

यह मुझे दिया:Security error: attempted to read protected variable

— Zitrax

1

क्या svg आपके वेब पेज के समान डोमेन पर होस्ट किया गया है?

— जोफॉर्कर

1

यह (बाहरी के लिए लोकलहोस्ट) ऐसा नहीं था, शायद इसलिए, हालांकि मैंने नीचे दिए गए अपने उत्तर का उपयोग करते हुए इसे सरल बना दिया।

— ज़िट्रैक्स

9

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

इस सेटअप ने मेरे लिए काम किया।

— एच टाइटन
स्रोत

यह वास्तव में काफी अच्छा काम करता है! वास्तव में महत्वपूर्ण बात वास्तव में परिभाषित है viewBox="0 0 640 80"। जाहिरा तौर पर अगर यह परिभाषित नहीं है, तो आप वास्तव में इसे स्केल नहीं कर सकते हैं या उदाहरण के लिए width: 100%आदि का उपयोग करके सीएसएस को आपके लिए स्केल कर सकते हैं

— इगोर

8

मुझे एक समस्या का सामना करना पड़ा जहां आईपैड पर आईओएस एसवीजी छवियों को सही ढंग से आकार नहीं देगा <object> टैग ।

सीएसएस शैली आकार में वृद्धि या कमी करेगी <object> कंटेनर के , लेकिन इसके अंदर की छवि को संशोधित नहीं किया जाएगा (iPad, iOS 7 पर)।

एसवीजी छवियों को एडोब इलस्ट्रेटर से निर्यात किया गया था, और इस में चौड़ाई और ऊंचाई की जगह समाधान निकला।

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

साथ में:

width="100%" height="100%"

मुझे <object>टैग का उपयोग करने की आवश्यकता थी क्योंकि <img>टैग वर्तमान में एसवीजी में बिटमैप्ड इमेज एम्बेड करने का समर्थन नहीं करता है।

— एंड्रयू स्विफ्ट
स्रोत

यह सही उत्तर है, खासकर यदि आपके पास एसवीजी इनलाइन है और <img टैग का उपयोग न करें! उत्तम!

— ग्रेग एलिस

5

लापता व्यूबॉक्स सेट करें और svg टैग में सेट ऊंचाई और ऊंचाई विशेषताओं की ऊंचाई और चौड़ाई मूल्यों में भरें
फिर वांछित प्रतिशत मानों के लिए ऊंचाई और चौड़ाई निर्धारित करके चित्र को स्केल करें । सौभाग्य।
आप preserveAspectRatio = "x200Y200 मिलने के साथ एक निश्चित पहलू अनुपात सेट कर सकते हैं, लेकिन यह आवश्यक नहीं है

जैसे

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

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

3

ब्राउज़र का आकार बदलने के लिए बस CSS का उपयोग करें! जैसे: अधिक जानकारी के लिए http://www.vlado-do.de/svg_test/<object style="width:30%"> देखें । मैंने अभी-अभी इसे SVG के साथ स्थानीय रूप से आज़माया है जिसकी चौड़ाई और ऊँचाई "pt" में दी गई है। यह फ़ायरफ़ॉक्स में अच्छा काम करता है।

— Vlado
स्रोत

1

देखते हैं। मुझे एसवीजी पर अपनी स्मृति को ताज़ा करना था, मैंने इन वर्षों में इसका उपयोग नहीं किया है।

आज मुझे जो मिला है, उससे लगता है कि यदि आप इकाइयों के बिना वस्तुओं के आयाम को निर्दिष्ट करते हैं, तो उनका एक निश्चित आकार (पिक्सेल में, मुझे लगता है) है। जाहिरा तौर पर, तब, एसवीजी का आकार बदलने पर उनका आकार बदलने का कोई तरीका नहीं है (यह केवल व्यूपोर्ट / कैनवास के आकार को बदल देता है)।

जब तक, जैसा कि इंगित किया गया है, आप प्रतिशत में SVG का आकार निर्दिष्ट करते हैं या एक व्यूबॉक्स निर्दिष्ट करते हैं (जैसे। viewBox = "0 0 600 500")।

अब, यदि आपके पास निर्यात किए गए एसवीजी को बदलने का कोई तरीका नहीं है, तो आप भाग्य से बाहर हैं, मुझे डर है। आप किस पुस्तकालय का उपयोग करते हैं?

— PhiLho
स्रोत

Matgotlib में svg बैकेंड। मैंने set_figwidth (वैल) जैसे कार्यों की कोशिश की है, लेकिन यह काम नहीं करता है, लेकिन मैं इस पुस्तकालय से बहुत परिचित नहीं हूं इसलिए मैं गलत कार्यों को देख सकता हूं।

— ज़िट्रैक्स

1

यहाँ एक PHP समाधान है जो QueryPath का उपयोग कर रहा है जिम केलर के जवाब के आधार पर ।

एक बार QueryPath लोड होने के बाद फंक्शन में अपनी svg स्क्रिप्ट पास करें।

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}

— डाइटर ग्रिबनिट्ज
स्रोत