🟢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.
Authorizations
Query parameters
company_idstring · uuidRequired
Body
image_idstring · uuid4Required
image_typestring · enumRequiredPossible values:
mask_over_imagebooleanOptionalDefault:
falseResponses
200
Successful Response
application/json
422
Validation Error
application/json
post
POST /service/rasterisation/v5/svg_masks/?company_id=123e4567-e89b-12d3-a456-426614174000 HTTP/1.1
Host: saas.haut.ai/
Authorization: Bearer YOUR_SECRET_TOKEN
Content-Type: application/json
Accept: */*
Content-Length: 1004
{
"image_id": "245a25a8-a5a6-44ed-980c-b4341281389e",
"image_type": "restored",
"mask_over_image": false,
"masks": [
{
"algorithm_tech_name": "hydration"
},
{
"algorithm_tech_name": "uniformness"
},
{
"algorithm_tech_name": "solar_pigmentation"
},
{
"algorithm_tech_name": "freckles"
},
{
"algorithm_tech_name": "redness"
},
{
"algorithm_tech_name": "translucency"
},
{
"algorithm_tech_name": "melasma"
},
{
"algorithm_tech_name": "moles"
},
{
"algorithm_tech_name": "lines"
},
{
"algorithm_tech_name": "post_inflammatory_hyperpigmentation"
},
{
"algorithm_tech_name": "eye_bags"
},
{
"algorithm_tech_name": "acne_inflammation"
},
{
"algorithm_tech_name": "pores"
},
{
"algorithm_tech_name": "pustules"
},
{
"algorithm_tech_name": "papules"
},
{
"algorithm_tech_name": "acne_class"
},
{
"algorithm_tech_name": "skin_tone"
},
{
"algorithm_tech_name": "pigmentation"
},
{
"algorithm_tech_name": "quality"
},
{
"algorithm_tech_name": "acne"
},
{
"algorithm_tech_name": "skin_type"
},
{
"algorithm_tech_name": "eyes_age"
},
{
"algorithm_tech_name": "age"
},
{
"algorithm_tech_name": "skintone_classification"
}
]
}{
"results": {
"algorithm_tech_name": "hydration",
"main_metric": {
"name": "Hydration Score",
"tech_name": "hydration_score",
"value": 25,
"widget_type": "bad_good_line"
},
"masked_image_url": "https://storage.googleapis.com/...",
"sub_metrics": [
{
"name": "Hydration Level",
"tech_name": "hydration_level",
"value": "Severe Dehydration",
"widget_type": "category"
}
]
},
"quality_feedback": {
"overlay": "Low quality image",
"tooltip": {
"negative": [
"Improper light source positioning"
],
"positive": [
"Good face resolution"
],
"warn": []
}
},
"image_url": "https://storage.googleapis.com/..."
}Possible Results
Normal full result (masked image + metrics + submetrics)
{
"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
{
"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
{
"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
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.
<object
type="image/svg+xml"
data="https://storage.googleapis.com/...">
</object>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.
<div id="svg-container"></div>
<script>
fetch("https://storage.googleapis.com/...")
.then(response => response.text())
.then(data => {
document.getElementById("svg-container").innerHTML = data;
});
</script>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:
polygon.vectorEffectClass.eye_bags-eye_bags_mask {
fill: blueviolet;
}So the result would look like this:
Last updated
Was this helpful?