SVG Symbol Support
Scalable Vector Graphics (SVG) is a markup language used to describe two-dimensional vector graphics. SuperMap supports importing SVG files as point symbols to render point features in maps.
SVG files are built on XML syntax, defining graphical elements through SVG elements and attributes. SuperMap can import static vector files compliant with the SVG 1.1 core specification.
SVG Elements Table
The table below specifies SuperMap's support status for commonly used elements and attributes in SVG Symbol creation. Other SVG elements and attributes not listed are not supported by SuperMap.
- Supported: SuperMap supports the corresponding element and its specific attributes. For global attribute support, refer to the "SVG Global Attributes Table" below.
- Partially Supported: SuperMap partially supports the corresponding element and attributes.
- Not Supported: SuperMap does not support the corresponding element at all.
Note: Unsupported SVG file contents will be ignored upon import. SVG Symbol only supports adjusting marker size by locking the aspect ratio.
| Element Category | Element | Specific Attributes | Description | SuperMap Support Status |
|---|---|---|---|---|
| Container | <svg> | width, height, viewBox, preserveAspectRatio, xmlns | Defines the SVG canvas, root container | Partially Supported Nested <svg> not supported preserveAspectRatio not supported |
| <g> | Grouping container for combining elements | Supported | ||
| <switch> | requiredFeatures, systemLanguage | Renders the first eligible child element based on client support or system language (commonly used for cross-platform adaptation) | Not Supported | |
| Graphical Elements | <rect> | x, y, width, height, rx, ry | Rectangle | Supported |
| <circle> | cx, cy, r | Circle | Supported | |
| <ellipse> | cx, cy, rx, ry | Ellipse | Supported | |
| <line> | x1, y1, x2, y2 | Straight line | Supported | |
| <polyline> | points | Polyline (not closed) | Supported | |
| <polygon> | points | Polygon (automatically closes the path) | Supported | |
| <path> | d, pathLength | Complex path (e.g., poly bezier) | Partially Supported pathLength not supported |
|
| <marker> | Omitted | Element for styling line endpoints or nodes | Not Supported | |
| Pattern Template | <pattern> | patternUnits, patternContentUnits, patternTransform, preserveAspectRatio, x, y, width, height, viewBox | Creates reusable vector patterns for filling | Partially Supported Stroke referencing patterns defined by <pattern> not supported preserveAspectRatio not supported |
| Text | <text> | x, y, dx, dy, rotate, textLength, lengthAdjust, text-anchor | Text element | Partially Supported textLength, lengthAdjust, rotate, dx, dy not supported |
| <tspan> | x, y, dx, dy, rotate, textLength, lengthAdjust | Text sub-element (for multiline or segmented styling) | Partially Supported textLength, lengthAdjust, rotate, dx, dy not supported |
|
| <textPath> | href (or xlink:href), startOffset, method, spacing | Text arranged along a path | Not Supported | |
| Gradient and Fill | <linearGradient> | x1, y1, x2, y2, gradientUnits, spreadMethod, href (or xlink:href), gradientTransform | Linear gradient | Supported Rotation (rotate) or skew (skewX) effects in gradientTransform property settings may differ after import |
| <radialGradient> | cx, cy, r, fx, fy, gradientUnits, spreadMethod, href (or xlink:href) | Radial gradient | Supported | |
| <stop> | offset, stop-color, stop-opacity | Gradient color stop | Supported | |
| Filter and Mask | <filter> | id, x, y, width, height, filterUnits | Filter container | Not Supported SVG filter and mask effects not supported |
| <feGaussianBlur> | stdDeviation, in | Gaussian blur | ||
| <feColorMatrix> | type, values | Color matrix transformation | ||
| <feOffset> | dx, dy | Offsets filter effects | ||
| <mask> | maskUnits (userSpaceOnUse/objectBoundingBox), maskContentUnits, x, y, width, height | Defines a transparency mask layer controlling element visibility via grayscale values (white fully visible, black fully hidden, gray semi-transparent) | ||
| <clipPath> | id, clipPathUnits (userSpaceOnUse or objectBoundingBox) | Defines a clipping path limiting element visibility | ||
| Interaction and Animation | <a> | xlink:href, target | Hyperlink | Not Supported SVG interaction and animation content not supported |
| <animate> | attributeName, from, to, dur, repeatCount, values | Attribute animation (basic animation) | ||
| Structure and Reference | <defs> | No special attributes | Defines reusable elements | Supported |
| <use> | x, y, width, height, xlink:href | References predefined elements | Supported | |
| <symbol> | id, viewBox, preserveAspectRatio | Reusable symbol (requires reference via <use>) | Not Supported | |
| <foreignObject> | Omitted | External object element | Not Supported | |
| Style Definition | <style> | type, media | Defines internal CSS style rules within SVG | Partially Supported CSS style descriptions containing /**/ and // comments not supported |
| Script | <script> | type, xlink:href | Equivalent to the script element in HTML | Not Supported |
| Image and External Resources | <image> | x, y, width, height, xlink:href, preserveAspectRatio | Embeds external images (PNG/JPEG/SVG) | Partially Supported xlink:href attribute referencing external image files not supported Only supports assigning Base64-encoded image data to xlink:href preserveAspectRatio not supported |
| Metadata | <metadata> | Omitted | Embeds non-SVG data (e.g., XML/RDF) | Not Supported |
| <title> | Omitted | Element description (visible to auxiliary tools) | Not Supported | |
| <desc> | Omitted | Element detailed explanation | Not Supported |
SVG Global Attributes Table
The table below lists universal attributes supported by SuperMap from the perspective of SVG element global attributes:
| Attribute Category | Attribute Name | Applicable Elements | Description | SuperMap Support Status |
|---|---|---|---|---|
| General Core Attributes | id | All elements | Element unique identifier for referencing or scripting | Supported |
| class | All elements | CSS class name for batch style control | Supported | |
| style | All elements | Inline CSS style | Supported | |
| XLink Attribute | xlink:href | <use>, <image>, <linearGradient>... | Defines resource reference relationships | Supported |
| Presentation Attributes (Can be used as CSS properties) |
d | <path> | Defines path command sequences (e.g., M 0 0 L 100 100) | Supported |
| fill | All graphical elements | Fill color or gradient/pattern reference (supports hex, RGB, keywords, or url(#id)) | Supported | |
| fill-opacity | All graphical elements | Fill transparency | Supported | |
| stroke | All graphical elements | Stroke color | Supported | |
| stroke-width | All graphical elements | Stroke width | Supported | |
| stroke-linecap | <path>, <line> | Line end style (butt/round/square) | Supported | |
| stroke-dasharray | All graphical elements | Dashed line pattern | Not Supported | |
| opacity | All elements | Overall transparency | Supported | |
| Text Style | text-anchor | <text>, <tspan> | Text anchor property describing text alignment relative to a given point (start, middle, end) | Supported |
| lengthAdjust | <text>, <tspan> | Text length adjustment method: spacing (adjust spacing only), spacingAndGlyphs (adjust spacing and glyph width) | Not Supported | |
| textLength | <text>, <tspan> | Forces definition of total rendered text length (including character spacing and glyph scaling) | Not Supported | |
| text-decoration | <text> | Controls text decoration effects, such as underline, strikethrough | Not Supported | |
| font-family | <text>, <tspan> | Font family | Supported Values like MicrosoftYaHei-Bold not supported |
|
| font-size | <text>, <tspan> | Font size | Supported | |
| font-weight | <text>, <tspan> | Font weight: normal, bold, numeric values (e.g., 700) | Partially Supported For numeric values: if ≥550, imported effect equals bold; if <550, equals normal. |
|
| fill | <text>, <tspan> | Text color (supports hex, RGB, color names) | Supported | |
| Coordinates and Transform | viewBox | <svg> | Defines canvas coordinate system (min-x min-y width height), controlling scaling and adaptation | Supported |
| transform | All graphical elements | Applies geometric transformations (translation, rotation, scaling, etc.) | Supported |
Notes on Using SVG Symbols
- When setting layer styles with SVG Symbols containing embedded images, use the original SVG Symbol size (i.e., set point marker size to 0) to prevent display distortion from image stretching.