Read SVG Image Resources as PixelMap in HarmonyOS

Read the original article：Read SVG Image Resources as PixelMap in HarmonyOS

Context

You can decode PNG/JPG resources into a PixelMap and draw them without trouble, but your SVG resource isn’t converting to a PixelMap. HarmonyOS does support decoding SVG into PixelMap, yet the SVG must be valid and use supported elements; otherwise the decoder returns nothing or fails.

Description

HarmonyOS’s image pipeline lets you obtain resource bytes (for example via resourceManager) → create an ImageSource → decode into a PixelMap. The decoder supports SVG among other formats, and rasterizes the vector at the size you request. However, SVG support focuses on a subset of tags; complex filters or unsupported elements can cause decode failures.

Solution / Approach

1- Validate the SVG markup (most frequent fix).

• Include the XML declaration exactly as: <?xml version="1.0" encoding="UTF-8"?>.
• Ensure the root <svg> tag is present (if it was removed, add it back) and has a namespace, for example: xmlns="http://www.w3.org/2000/svg".
• Provide either explicit width/height or a valid viewBox so the rasterizer knows target dimensions. Missing size metadata can lead to 0×0 or failed decode.

2- Keep to supported SVG features.

Use basic shapes/paths and avoid unsupported constructs (heavy filters, scripting, external CSS/fonts). HarmonyOS documents a supported tag set for SVG rendering (for example svg, rect, circle, ellipse, path, line, polyline, polygon, plus a limited set of filter primitives). If your asset uses beyond this subset, simplify it.

3- Load bytes and decode to PixelMap.
Correctly fetching resource bytes, creating an ImageSource, and decoding with DecodingOptions that include desiredSize to rasterize at your target dimensions. This same flow works for SVG once the file is valid.

testSvgPixelMap(wi:number,hi:number,isPx:boolean =false){
    const wiPx = isPx?wi:vp2px(wi)
    const hiPx = isPx?hi:vp2px(hi)
    let decodingOptions : image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: image.PixelMapFormat.UNKNOWN,
      desiredSize:{width:wiPx,height:hiPx},
      desiredDynamicRange: image.DecodingDynamicRange.AUTO
    }
    const resourceMgr = getContext(this).resourceManager;
    let sourceOptions: image.SourceOptions =
      { sourceDensity: 120, sourcePixelFormat: image.PixelMapFormat.RGBA_8888 };
    let  imgRes:ResourceStr = $r('app.media.ic_function_document')
    let img = resourceMgr.getMediaContentSync(imgRes);
    let imageSource = image.createImageSource(img.buffer.slice(0, img.buffer.byteLength),sourceOptions);
    if(!imageSource){
      console.error("imageSource undefined")
    }else{
      console.error(`imageSource size height`)
    }
    return imageSource.createPixelMapSync(decodingOptions)
  }

Key Takeaways

• HarmonyOS can decode SVG into a PixelMap; failures usually stem from the SVG file itself (missing XML prolog, absent <svg> root, no size, or unsupported elements).

• Always include <?xml version="1.0" encoding="UTF-8"?> and a valid <svg ... xmlns="http://www.w3.org/2000/svg">.

• Keep SVGs simple (basic shapes/paths) and specify size via width/height or viewBox.

• Your current resource bytes → ImageSource → createPixelMap pipeline is the right approach; once the SVG is valid, it will rasterize at the desiredSize.

Written by Fatih Turan Gundogdu