> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/developers/saas-api-overview/api-for-images/api-for-svg-masks.md). # API for SVG Masks How to receive Algorithm Masks visualized as SVG images. the **Masks** are additional results of image analysis, representing the spatial information about detected skin/hair health returned by the selected set of Algorithms. {% hint style="info" %} Check the [Masks description](/haut.ai/haut.ai-features/algorithms/algorithm-results.md#masks) for more details. {% endhint %} ## POST /service/rasterisation/v5/svg\_masks/ > Apply Mask V5 Http ```json {"openapi":"3.1.0","info":{"title":"FastAPI","version":"0.1.0"},"servers":[{"url":"https://saas.haut.ai/"}],"security":[{"HTTPBearer":[]}],"components":{"securitySchemes":{"HTTPBearer":{"type":"http","scheme":"bearer"}},"schemas":{"ApplyMaskRequestV5":{"properties":{"image_id":{"type":"string","format":"uuid4","title":"Image Id"},"image_type":{"$ref":"#/components/schemas/ImageType"},"mask_over_image":{"type":"boolean","title":"Mask Over Image","default":false},"masks":{"items":{"$ref":"#/components/schemas/MaskRequestDetailsV5"},"type":"array","title":"Masks"}},"type":"object","required":["image_id","image_type","masks"],"title":"ApplyMaskRequestV5"},"ImageType":{"type":"string","enum":["original","restored"],"title":"ImageType"},"MaskRequestDetailsV5":{"properties":{"algorithm_tech_name":{"type":"string","title":"Algorithm Tech Name"},"main_metric":{"type":"boolean","title":"Main Metric","default":true},"sub_metrics":{"type":"boolean","title":"Sub Metrics","default":true},"new_hydration_mask":{"type":"boolean","title":"New Hydration Mask","default":true}},"type":"object","required":["algorithm_tech_name"],"title":"MaskRequestDetailsV5"},"ApplyMaskResponseV5":{"properties":{"results":{"items":{"$ref":"#/components/schemas/MaskedResultV5"},"type":"array","title":"Results","default":[]},"quality_feedback":{"additionalProperties":true,"type":"object","title":"Quality Feedback","default":{}},"image_url":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Image Url"}},"type":"object","title":"ApplyMaskResponseV5"},"MaskedResultV5":{"properties":{"algorithm_tech_name":{"type":"string","title":"Algorithm Tech Name"},"masked_image_url":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Masked Image Url"},"error":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Error"},"main_metric":{"anyOf":[{"$ref":"#/components/schemas/SubMetricV3"},{"type":"null"}]},"sub_metrics":{"items":{"$ref":"#/components/schemas/SubMetricV3"},"type":"array","title":"Sub Metrics","default":[]}},"type":"object","required":["algorithm_tech_name"],"title":"MaskedResultV5"},"SubMetricV3":{"properties":{"name":{"type":"string","title":"Name"},"tech_name":{"type":"string","title":"Tech Name"},"value":{"anyOf":[{"type":"integer"},{"type":"string"}],"title":"Value"},"widget_type":{"type":"string","title":"Widget Type"}},"type":"object","required":["name","tech_name","value","widget_type"],"title":"SubMetricV3"},"HTTPValidationError":{"properties":{"detail":{"items":{"$ref":"#/components/schemas/ValidationError"},"type":"array","title":"Detail"}},"type":"object","title":"HTTPValidationError"},"ValidationError":{"properties":{"loc":{"items":{"anyOf":[{"type":"string"},{"type":"integer"}]},"type":"array","title":"Location"},"msg":{"type":"string","title":"Message"},"type":{"type":"string","title":"Error Type"}},"type":"object","required":["loc","msg","type"],"title":"ValidationError"}}},"paths":{"/service/rasterisation/v5/svg_masks/":{"post":{"tags":["apply mask to photo","render masks as SVGs"],"summary":"Apply Mask V5 Http","operationId":"apply_mask_v5_http_service_rasterisation_v5_svg_masks__post","parameters":[{"name":"company_id","in":"query","required":true,"schema":{"type":"string","format":"uuid","title":"Company Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/ApplyMaskRequestV5"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ApplyMaskResponseV5"}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}}}} ``` ### Possible Results Normal full result (masked image + metrics + submetrics) ```json { "algorithm_tech_name": "hydration", "masked_image_url": "https://storage.googleapis.com/prod-rasterised_images/companies/8e1d8206-f8e4-4615-924d-6b67abb907e4/images/245a25a8-a5a6-44ed-980c-b4341281389e/masks/v5/hydration_restored.svg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=rasterisation%40sasuke-core-prd.iam.gserviceaccount.com%2F20250304%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20250304T091623Z&X-Goog-Expires=3600&X-Goog-SignedHeaders=host&X-Goog-Signature=a6cf133f8c185ab7aa903a9d09eac4df7dc51a3514ca214726bab1ed51ca3fe1ff22f4a3385db51efb032780c056b484b8912265c6b5a92e3f04c23bd4983f28b9600665307007f9fd76b797f4d2464f146f7c2094baa96666e8d1aaa1a267afdc17eb06ffd975d9221763f58571ec5ae6ab9cbb0654764099aa0252c861f91e689cae1d0205204dd76e08b47d8031ffeba6a0083cd7868da8571c10f0c9ac3660c44b0d330ac5ec8a224f43fc28a5b61e780c17aa9f1b520c2f7b1537aba032e85c8de459d2388db614b278165f96f7ce860e37af1685a320101b964a574c9541eb0ba96b89854b5c6df54f43cad545e2d2a5d52fc3f8cb786e084abaccfb3a", "error": null, "main_metric": { "name": "Hydration Score", "tech_name": "hydration_score", "value": 25, "widget_type": "bad_good_line" }, "sub_metrics": [ { "name": "Hydration Level", "tech_name": "hydration_level", "value": "Severe Dehydration", "widget_type": "category" } ] } ``` Normal result without submetrics ```json { "algorithm_tech_name": "uniformness", "masked_image_url": "https://storage.googleapis.com/prod-rasterised_images/companies/8e1d8206-f8e4-4615-924d-6b67abb907e4/images/245a25a8-a5a6-44ed-980c-b4341281389e/masks/v5/uniformness_restored.svg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=rasterisation%40sasuke-core-prd.iam.gserviceaccount.com%2F20250304%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20250304T091623Z&X-Goog-Expires=3600&X-Goog-SignedHeaders=host&X-Goog-Signature=95b0345083fe3f82cac806ab2f9f20417248ad7252c8ea1274f964982a3c3ab5788ff3cb3947410022d074525c1fa267adf046c2983dec6acd9c13d76593c9272b4186c523f112e77627f212703301f54b7efac104b617031fd7c745028467c624f88c27fbd117c05643a782b1e2ba25a0c5a1cd59f6b6f7c1fb4b03713c8d80eeae84de86500a08fb8786524fe9c102a8a24913bb8cee2f209a89f31df64e52bec4ac172935b13e8681b13e787b986b2c4ec716383609fb4e5221c68dbaf10fbf8631650295043b27ef308a902b05f58ed82dfa15b63fadd2ff3c989c1a24994d57c5212f47497a1fafe297ba9905568fde4182b2b34382643d35a8f8cde4af", "error": null, "main_metric": { "name": "Uniformness Score", "tech_name": "uniformness_score", "value": 59, "widget_type": "bad_good_line" }, "sub_metrics": [] } ``` Normal result but without mask ```json { "algorithm_tech_name": "skin_type", "masked_image_url": null, "error": null, "main_metric": { "name": "Skin type", "tech_name": "face_skin_type_class", "value": "Dry", "widget_type": "category" }, "sub_metrics": [ { "name": "U-zone skin type", "tech_name": "u_zone_skin_type_class", "value": "Dry", "widget_type": "category" }, { "name": "T-zone skin type", "tech_name": "t_zone_skin_type_class", "value": "Dry", "widget_type": "category" } ] } ``` ### Possible Errors If you accidentally request an algorithm without masks: 
[
      {
            "algorithm_tech_name": "front_face_areas",
            "masked_image_url": null,
            "error": "front_face_areas processing error: The requested algorithm has no areas results.",
            "main_metric": null,
            "sub_metrics": []
      }
]
If you request an algorithm that wasn't calculated for the image: 
[
    {
      "algorithm_tech_name": "acne.front_face_areas",
      "masked_image_url": null,
      "error": "acne.front_face_areas processing error: The requested algorithm is not found.",
      "main_metric": null,
      "sub_metrics": []
    }
]
### Example SVG Mask

Hydration Mask

### How to embed SVG mask or image to HTML #### Without JavaScript Using `object` tag, just insert the generated signed URL into `data` attribute. ✅ Pros: Retains SVG scalability and interactions. ❌ Cons: Limited browser support and no direct CSS styling. {% code overflow="wrap" %} ```html ``` {% endcode %} #### With JavaScript Download SVG content from the signed URL and inject it into your `div` container. ✅ Pros: Allows direct manipulation via CSS and JS. ❌ Cons: Requires JavaScript to fetch and insert the SVG. ```html
``` ### CSS mask customization example For example I have the svg mask for eye bags algorithm. The mask consists of 3 masks actually: * `eye_bags-dark_circles_mask` (yellow) * `eye_bags-eye_bags_mask` (green) * `eye_bags-lacrimal_grooves_mask` (white) And it will look like this:
For example, I would like to override the fill color of `eye_bags-eye_bags_mask`. In order to achieve it, I need to add this CSS rule: ```css polygon.vectorEffectClass.eye_bags-eye_bags_mask { fill: blueviolet; } ``` So the result would look like this:
*** {% hint style="warning" %} Not a Haut.AI client yet? {% endhint %} Book a demo Platform overview on haut.ai --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.saas.haut.ai/haut.ai/developers/saas-api-overview/api-for-images/api-for-svg-masks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.