> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# MapLibre SVG आइकन: पिक्सेल और प्रतीक आकार जाँचें

> MapLibre symbol लेयर के लिए अपना SVG डिकोड करें, चित्र घनत्व और आइकन आकार नियंत्रित करें और संपादन योग्य मास्टर रखें। दिखी आकृति व खुला भाग सत्यापित करें।

Source: https://perfectvector.com/hi/blog/maplibre-svg-symbol-image

Language: hi
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00

MapLibre GL JS में SVG आइकन चित्र लेने के लिए ब्राउज़र `Image` से SVG डिकोड करें, वह चित्र `addImage` को दें और symbol लेयर के `icon-image` में उसका ID संदर्भित करें। स्रोत SVG अलग रखें: पंजीकृत style चित्र रेंडरिंग के लिए पिक्सेल देता है, संपादन योग्य SVG पाथ ऑब्जेक्ट नहीं।

वर्तमान [आधिकारिक SVG symbol उदाहरण](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-remote-svg-symbol/) यही डिकोडिंग तरीका दिखाता है। यह सामान्य दावा कि MapLibre SVG कलाकृति नहीं दिखा सकता, उसे अनदेखा करेगा। हमारा उदाहरण 6.12.0 निश्चित करता है और बिना टोकन के खाली मानचित्र में हमारे मूल खोखले बैज को जाँचता है।

## स्रोत और पंजीकृत चित्र अलग रखें

सुरक्षित स्रोत में भीतरी खुले भाग वाला एक compound हीरा पाथ है। उसका `viewBox`, `0 0 64 64` रहता है। हम स्पष्ट चौड़ाई और ऊँचाई 64 या 128 वाली दो प्रतियाँ बनाते हैं; पाथ डेटा समान रहता है।

ब्राउज़र डिकोडिंग हर प्रति को घोषित आयाम के चित्र में बदलती है। MapLibre की [`addImage` API](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#addimage), `HTMLImageElement` और `ImageData` जैसे चित्र ऑब्जेक्ट स्वीकारती है। वह SVG पाथ को symbol ज्यामिति निर्देश की तरह नहीं लेती।

रंग या रूपरेखा बदलते समय यह अंतर महत्वपूर्ण है। SVG मास्टर संपादित करें, नया चित्र डिकोड करें और सही API से मानचित्र का चित्र अपडेट करें। पंजीकृत पिक्सेल जाँचने से मूल पाथ निर्माण वापस नहीं आता। हमारी [एम्बेडेड रास्टर SVG गाइड](https://perfectvector.com/hi/blog/svg-contains-raster-image) SVG कंटेनर और संपादन योग्य ज्यामिति का व्यापक अंतर समझाती है।

**स्रोत कलाकृति और symbol पेंट**

![खोखले हीरा बैज की संपादन योग्य रूपरेखाओं और पिक्सेल-आधारित प्रदर्शन प्रतियों का वैचारिक चित्रण](https://perfectvector.com/blog/maplibre-svg-symbol-image/source-and-symbol.webp)

*चित्रण: डिकोड चित्र का प्रदर्शन आकार नियंत्रित करते हुए संपादन योग्य SVG रखें। नीचे की WebGL माप अलग बनाए ब्राउज़र नमूनों से हैं।*

## चित्र घनत्व और आइकन आकार साथ चुनें

दो सेटिंग हमारे symbol का नाममात्र चित्र फ़्रेम प्रभावित करती हैं। चित्र का `pixelRatio` घनत्व बताता है; लेयर का `icon-size` परिणामी आइकन स्केल करता है। वर्तमान [style-image मेटाडेटा](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/StyleImageMetadata/) और [symbol लेआउट विनिर्देश](https://maplibre.org/maplibre-style-spec/layers/#icon-size) देखें।

बिना रोटेशन और टेक्स्ट फ़िटिंग वाले हमारे केंद्रित symbol का नाममात्र फ़्रेम है:

```text
logical width = decoded width / image pixelRatio * icon-size
logical height = decoded height / image pixelRatio * icon-size
```

अनुपात 2 पर पंजीकृत 128×128 चित्र वही 64×64 नाममात्र फ़्रेम देता है जो अनुपात 1 वाला 64×64 चित्र, जब `icon-size` 1 हो। पहले अनुपात को 1 करने पर फ़्रेम दोगुना होता है। `icon-size` 1.5 करने पर 64×64 लॉजिकल चित्र फ़्रेम 96×96 होता है।

फ़्रेम में स्रोत की खाली जगह शामिल है। उसके भीतर बैज छोटा लगे तो हर symbol बड़ा करने से पहले SVG सीमा जाँचें। समान अनुपात पर बड़ा डिकोड चित्र symbol भी बड़ा करता है; केवल इनपुट आयाम घनत्व की रणनीति नहीं हैं।

मानचित्र Canvas का अपना पिक्सेल अनुपात है। वह `addImage` को दिए अनुपात से अलग है। हमारा माप परीक्षण प्रलेखित [Map विकल्पों](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) से Canvas अनुपात स्पष्ट 1 करता है; ब्राउज़र device pixel ratio 2 था। इससे स्क्रीनशॉट के डिवाइस पिक्सेल को CSS आयाम मानने के बजाय नीचे की तुलना अलग होती है।

## वास्तव में पेंट क्षेत्र तुलना करें

हमने Chrome में WebGL 2 के साथ पाँच symbol मामले रेंडर किए। हर मानचित्र में एक बिंदु, वही हल्का बैकग्राउंड, कोई टाइल और कोई टोकन नहीं था। दोनों SVG स्रोत में एक समान पाथ और कोई एम्बेडेड चित्र नहीं था।

टेराकोटा कलाकृति मापने के लिए हमारी रीडिंग ने वास्तविक WebGL पिक्सेल में लाल-प्रधान रंग खोजा: लाल, हरे के 1.35 गुने और नीले के 1.6 गुने से अधिक। पहचाने बाउंडिंग बॉक्स आयाम को Canvas backing-to-CSS अनुपात से भाग दिया। यह थ्रेशोल्ड वाला पेंट क्षेत्र मापता है, पूरा चित्र फ़्रेम नहीं।

| डिकोड चित्र | चित्र अनुपात | icon-size | नाममात्र फ़्रेम | देखा पेंट क्षेत्र |
| ----------- | ------------ | --------- | --------------- | ----------------- |
| 64×64       | 1            | 1         | 64×64           | 62×62 CSS px      |
| 128×128     | 1            | 1         | 128×128         | 126×126 CSS px    |
| 128×128     | 2            | 1         | 64×64           | 62×62 CSS px      |
| 64×64       | 1            | 1.5       | 96×96           | 94×94 CSS px      |
| 128×128     | 2            | 1.5       | 96×96           | 94×94 CSS px      |

सभी किनारा पिक्सेल रंग थ्रेशोल्ड पार नहीं करते, इसलिए मापा पेंट क्षेत्र नाममात्र फ़्रेम से छोटा है। जोड़े इस परीक्षण में इच्छित आकार संबंध दिखाते हैं; हर घनत्व या ज़ूम पर समान पिक्सेल गुणवत्ता साबित नहीं करते।

पंजीकृत चित्र के केंद्र का अल्फ़ा हर मामले में शून्य था। रेंडर मानचित्र में वह जगह बैकग्राउंड रंग `(244, 242, 232)` और अल्फ़ा 255 दिखाती थी, क्योंकि बैकग्राउंड लेयर स्वयं अपारदर्शी थी। खुले भाग से अपारदर्शी मानचित्र पिक्सेल दिखने का अर्थ नहीं कि आइकन की पारदर्शिता खो गई।

ये हमारे स्रोत, ब्राउज़र, Canvas सेटिंग और थ्रेशोल्ड तक सीमित अवलोकन हैं। दी जाने वाली कलाकृति इच्छित आकारों पर जाँचें, खासकर पतले स्ट्रोक या छोटे खुले भाग हों तो।

## बिना टोकन का शुरुआती symbol उदाहरण कॉपी करें

पूरा HTML सहेजें और स्थानीय वेब सर्वर से सर्व करें। निश्चित लाइब्रेरी और CSS के लिए इंटरनेट चाहिए; मानचित्र टाइल सेवा या API key नहीं लेता। SVG टेक्स्ट के रूप में एम्बेड और data URL में एन्कोड है।

उदाहरण [`image.decode()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) की प्रतीक्षा करता है, इसलिए सफल डिकोड के बाद पंजीकरण होता है। style लोड होने के बाद ज्ञात चित्र पंजीकृत करता है; एक निश्चित बैज के लिए आधिकारिक उदाहरण का missing-image resolver नहीं चाहिए।

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>MapLibre decoded SVG symbol</title>
<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.css">
<style>#map { width: 360px; height: 280px; }</style>
<div id="map"></div>
<pre id="status">Loading…</pre>
<script type="module">
import * as ml from
  'https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 64 64"><path fill="#c45b39" fill-rule="evenodd" d="M32 0 L64 32 L32 64 L0 32 Z M32 16 L16 32 L32 48 L48 32 Z"/></svg>`;
const image = new Image();
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
try {
  await image.decode();
  const ratio = 2;
  const iconSize = 1;
  const map = new ml.Map({
    container: 'map', center: [0, 0], zoom: 2, interactive: false,
    attributionControl: false, fadeDuration: 0,
    style: { version: 8, sources: {}, layers: [{
      id: 'background', type: 'background',
      paint: { 'background-color': '#f4f2e8' }
    }] }
  });
  map.on('error', e => {
    document.querySelector('#status').textContent = e.error.message;
  });
  await map.once('load');
  map.addImage('emblem', image, { pixelRatio: ratio });
  map.addSource('point', { type: 'geojson', data: {
    type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] },
    properties: {}
  } });
  map.addLayer({ id: 'emblem', type: 'symbol', source: 'point', layout: {
    'icon-image': 'emblem', 'icon-size': iconSize, 'icon-overlap': 'always'
  } });
  await map.once('idle');
  const registered = map.getImage('emblem');
  document.querySelector('#status').textContent = JSON.stringify({
    version: ml.getVersion(),
    decoded: [image.naturalWidth, image.naturalHeight],
    registered: [registered.data.width, registered.data.height],
    imagePixelRatio: registered.pixelRatio,
    logicalFrame: [image.naturalWidth / ratio * iconSize,
                   image.naturalHeight / ratio * iconSize]
  }, null, 2);
} catch (error) {
  document.querySelector('#status').textContent = String(error);
}
</script>
</html>
```

स्थिति में डिकोड और पंजीकृत आयाम `[128, 128]`, चित्र अनुपात 2 और लॉजिकल फ़्रेम `[64, 64]` होना चाहिए। यह नाममात्र फ़्रेम बताती है, मापा पेंट बाउंडिंग बॉक्स नहीं। 96×96 फ़्रेम के लिए `iconSize` 1.5 करें। कम घनत्व इनपुट तुलना करने के लिए वही पाथ और viewBox रखकर SVG चौड़ाई व ऊँचाई 64 और `ratio` 1 करें।

`icon-image` को पंजीकृत ID के बराबर रखें। आइकन न दिखे तो सफल डिकोडिंग और पंजीकरण पुष्ट करें, फिर स्रोत, लेयर, दृश्यता और स्थिति सेटिंग जाँचें। हमारा एक-बिंदु उदाहरण `icon-overlap: 'always'` लेता है ताकि तुलना दूसरे symbols की टक्कर से स्वतंत्र हो। उत्पादन style को अलग collision व्यवहार चाहिए हो सकता है।

## डिलीवरी मॉडल के अनुकूल हो तो DOM मार्कर लें

MapLibre [DOM Markers के साथ अपने आइकन](https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/) भी बताता है। वह style चित्र पंजीकृत करने के बजाय HTML एलिमेंट लपेटता है। एलिमेंट-आधारित मार्कर प्रक्रिया ऐप के अनुकूल हो तो चुनें, फिर उसकी ब्राउज़र शैली और स्थिति अलग जाँचें।

Mapbox Studio की वेक्टर आइकन सुविधा या MapTiler SDK उदाहरण के दावे इस MapLibre style-image प्रक्रिया पर न लगाएँ। साधारण पूर्ण-रंग SVG चित्र केवल `sdf` फ़्लैग बदलने से signed distance field नहीं बनता। घनत्व सेटिंग तय करती हैं कि चित्र कैसे समझा और दिखाया जाता है; पिक्सेल को संपादन योग्य रूपरेखा नहीं बनातीं।

गंतव्य को PNG चाहिए तो हमारी [Sharp SVG रेंडरिंग गाइड](https://perfectvector.com/hi/blog/sharp-svg-to-png) रास्टर डिलीवरी प्रति बनाना बताती है। संपादन के लिए साधारण SVG मास्टर रखें; [inline SVG और image डिलीवरी](https://perfectvector.com/hi/blog/inline-svg-vs-img) के संवाद मॉडल भी अलग हैं।

आइकन केवल PNG या JPG हो और संपादन योग्य कलाकृति चाहिए तो [PerfectVector से SVG रूपरेखाएँ पाएँ](https://perfectvector.com/hi/image-to-vector), बाहरी आकृति व खुला भाग जाँचें और मानचित्र चित्र डिकोड करने से पहले मास्टर रखें। मानचित्र कोड अभी भी घनत्व, symbol आकार और भौगोलिक स्थिति नियंत्रित करता है। साफ़ मौजूदा SVG सीधे डिकोडिंग से गुजर सकता है; [वेक्टराइज़ेशन गाइड](https://perfectvector.com/hi/blog/what-is-image-vectorization) बताती है कि रास्टर रूपांतरण कब उपयोगी है।

## अक्सर पूछे जाने वाले प्रश्न

**क्या MapLibre GL JS SVG कलाकृति को symbol की तरह दिखा सकता है?**
हाँ। उसका वर्तमान आधिकारिक उदाहरण ब्राउज़र Image से SVG टेक्स्ट डिकोड करके symbol लेयर के लिए चित्र पंजीकृत करता है। मूल SVG को पंजीकृत चित्र से अलग रखें।

**बड़े इनपुट से आइकन बड़ा क्यों हुआ?**
उसी image pixel ratio और icon-size पर डिकोड आयाम बढ़ाने से नाममात्र फ़्रेम बढ़ता है। चित्र घनत्व और प्रदर्शन स्केल जानबूझकर साथ तय करें।

**क्या pixelRatio symbol में संपादन योग्य SVG पाथ बचाता है?**
नहीं। वह चित्र घनत्व बताता है। स्रोत SVG रखें और संपादित करें, फिर मानचित्र के लिए नया चित्र डिकोड करें।

**आइकन के छेद के भीतर मानचित्र पिक्सेल अपारदर्शी क्यों है?**
अपारदर्शी बैकग्राउंड लेयर पारदर्शी आइकन खुले भाग से दिख सकती है। पंजीकृत चित्र का अल्फ़ा पूरी तरह कंपोज़िट मानचित्र Canvas से अलग जाँचें।

## स्रोत

1. [MapLibre — दूरस्थ SVG symbol दिखाएँ](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-remote-svg-symbol/) — वर्तमान SVG टेक्स्ट, ब्राउज़र चित्र और addImage प्रक्रिया।
2. [MapLibre — Map API](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#addimage) — स्वीकार्य चित्र ऑब्जेक्ट और रनटाइम चित्र पंजीकरण।
3. [MapLibre — StyleImageMetadata](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/StyleImageMetadata/) — चित्र घनत्व और SDF व्याख्या मेटाडेटा।
4. [MapLibre — Symbol लेआउट विनिर्देश](https://maplibre.org/maplibre-style-spec/layers/#icon-size) — आइकन स्केलिंग और टक्कर व्यवहार।
5. [MapLibre — MapOptions](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) — माप परीक्षण नियंत्रित करने के Canvas विकल्प।
6. [MDN — HTMLImageElement.decode](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode) — ब्राउज़र चित्र डिकोडिंग की प्रतीक्षा और विफलता सँभालना।
7. [MapLibre — Markers से अपने आइकन जोड़ें](https://maplibre.org/maplibre-gl-js/docs/examples/add-custom-icons-with-markers/) — अलग HTML-एलिमेंट मार्कर प्रक्रिया।

## Explore

- [Read the HTML article](https://perfectvector.com/hi/blog/maplibre-svg-symbol-image)
- [Satori SVG लोगो: ब्रांड कार्ड में कलाकृति सुरक्षित रखें](https://perfectvector.com/hi/blog/satori-svg-logo.md)
- [SVG से Canvas: PNG निर्यात से पहले कलाकृति लोड करें](https://perfectvector.com/hi/blog/svg-canvas-image-export.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)