Intro
llustrations play a vital role in enhancing the visual appeal and user experience of a digital product. In our design system, it is crucial to ensure that these illustrations are consistent, scalable, and adhere to the stylistic guidelines to be UXC-027 Illustration compliant. This article focuses on the essential practices for exporting illustrations as SVGs and converting hex color codes to theming parameters, ensuring your illustrations are themeable, and remain cohesive within our design system.
When to Use
Use the SVG Export and Hex Code Conversions if:
- your product builds with one of the following technologies: SAPUI5 Web Components, Fundamental Styles, FundamentalNGX, or SAPUI5.
- you want to create UXC-027 compliant illustrations.
Do not use SVG Export and Hex Code Conversions if:
- the product using the illustrations has a product-specific theming system. Then you need to align within your product team how to deal with the product-specific theme parameters.
Pre-Condition
In our design system, we encourage the use of theming parameters for illustrations, which ensures consistency and harmony by restricting color choices to a specific palette. Please exclusively use these colors for illustrations, available in our Illustration Styleguide.
You can also download the colors as Adobe Illustrator color swatches. By doing so, you have each color in the swatch and can get started right away with the illustrations.
Are you working with swatches in Adobe Illustrator for the first time? Check out how to load swatches in Adobe Illustrator.
SVG Export
Illustrations must be exported as SVG to ensure scalability and quality. Please follow these steps to export SVGs properly:
1 – Check Strokes and Illustration Sizes
Ensure that all strokes are outlined in the illustrations (how-to-video linked below). Additionally, check if the illustrations are framed correctly at the following sizes:
- Large Size (L): 320px x 240px
- Medium Size (M): 160px x 160px
- Small Size (S): 128px x 128px
- Extra Small Size (XS): 45px x 45px
2 – Exporting from Design Tools
Designers typically use Figma or Adobe Illustrator. In Figma, export settings for SVG are limited, whereas Adobe Illustrator provides detailed export controls. It’s recommended to export from Adobe Illustrator. Please quickly watch this video explaining how to outline strokes, and export SVGs from Adobe Illustrator properly. Tip: download the video to watch it in higher quality.
Important Settings: In the “Export As” dialog in Adobe Illustrator, ensure “Styling” is set to “Presentation Attributes” to avoid inline styling in the SVG code. Please be aware that inline stylings lead to security issues.
3 – Follow the Illustration Naming Convention
Export each illustration size as SVG and name them as follows, replacing UseCase with the actual illustration name:
- L-Size: sapIllus-UseCase-Large.svg
- M-Size: sapIllus-UseCase-Medium.svg
- S-Size: sapIllus-UseCase-Small.svg
- XS-Size: sapIllus-UseCase-ExtraSmall.svg
Example: sapIllus-GrowingPlants-Large.svg
Hex Codes Replacement to Theming Parameters in a Code Editor
1 – Open the SVG in a code editor
Recommended: Adobe Dreamweaver, Visual Studio Code)
2 – Insert id=”sapIllus-UseCase-TheSize" into the first line, replacing TheSize and UseCase with the appropriate values matching your SVG file name.
Example: id="sapIllus-IceCream-Large"
https://main--builder-prospect--sapudex.hlx.page/wp-content/uploads/sites/69/2025/05/Screenshot-2025-05-23-at-12.50.53.png
Illustration code snippet from Adobe Dreamweaver showcasing the id
3 – Ensure hex codes are replaced
It’s easy. In theory, you simply replace
fill="#hexcode"
With:
fill="var(--sapContent_Illustrative_ColorNUMBER)"
in the code.
You can find a list of all allowed hex codes and their corresponding theming parameters in the color reference list below. Replace all hex codes in your SVG with the corresponding theming parameters. You can get this done quickly by using the find & replace feature of the code editor tool.
Color Replacement Reference
<p><div> <div data-valign="middle">Swatch</div> <div data-valign="middle">Color Name</div> <div data-valign="middle">Hex (Find:)</div> <div data-valign="middle">Theme Parameter (Replace With:)</div> </div> <div> <div data-align="center" data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_17c043923b1af56f5f4698312b8d7b239ba259ac9.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17c043923b1af56f5f4698312b8d7b239ba259ac9.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17c043923b1af56f5f4698312b8d7b239ba259ac9.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_17c043923b1af56f5f4698312b8d7b239ba259ac9.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_17c043923b1af56f5f4698312b8d7b239ba259ac9.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Accent (Red) Color</div> <div data-valign="middle"><code>fill="#D20A0A"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color23)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1bcd7081a5993e58c60c179a9809b6062830da36e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bcd7081a5993e58c60c179a9809b6062830da36e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bcd7081a5993e58c60c179a9809b6062830da36e.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1bcd7081a5993e58c60c179a9809b6062830da36e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1bcd7081a5993e58c60c179a9809b6062830da36e.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Background Color</div> <div data-valign="middle"><code>fill="#89D1FF"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color20)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_15dcfdcac35fc8e9925926c00932d51ea858712d2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_15dcfdcac35fc8e9925926c00932d51ea858712d2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_15dcfdcac35fc8e9925926c00932d51ea858712d2.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_15dcfdcac35fc8e9925926c00932d51ea858712d2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_15dcfdcac35fc8e9925926c00932d51ea858712d2.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Background Elements (Blue) Color</div> <div data-valign="middle"><code>fill="#56BDFF"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color2)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1b9bd9548b344ade2b2421ef19525b66aebaad84b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b9bd9548b344ade2b2421ef19525b66aebaad84b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b9bd9548b344ade2b2421ef19525b66aebaad84b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1b9bd9548b344ade2b2421ef19525b66aebaad84b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1b9bd9548b344ade2b2421ef19525b66aebaad84b.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Background Elements (Blue) Color</div> <div data-valign="middle"><code>fill="#0070F2"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color13)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1c8befb3b75ccf43160a19b0021a86db17bc29ccd.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c8befb3b75ccf43160a19b0021a86db17bc29ccd.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c8befb3b75ccf43160a19b0021a86db17bc29ccd.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1c8befb3b75ccf43160a19b0021a86db17bc29ccd.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1c8befb3b75ccf43160a19b0021a86db17bc29ccd.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Background Elements (Blue) Color</div> <div data-valign="middle"><code>fill="#0040B0"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color14)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_154f14493ced39bc50af744beb51b5a8a1c94aed3.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_154f14493ced39bc50af744beb51b5a8a1c94aed3.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_154f14493ced39bc50af744beb51b5a8a1c94aed3.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_154f14493ced39bc50af744beb51b5a8a1c94aed3.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_154f14493ced39bc50af744beb51b5a8a1c94aed3.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 1 (Rose) Color</div> <div data-valign="middle"><code>fill="#FFEAF4"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color25)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1178e82fb1be078f6e9876102d7a9af65ebea343f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1178e82fb1be078f6e9876102d7a9af65ebea343f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1178e82fb1be078f6e9876102d7a9af65ebea343f.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1178e82fb1be078f6e9876102d7a9af65ebea343f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1178e82fb1be078f6e9876102d7a9af65ebea343f.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 1 (Rose) Color</div> <div data-valign="middle"><code>fill="#FFB2D2"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color24)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_14af98a4093869be583ff11e12593f523a9c5aa42.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_14af98a4093869be583ff11e12593f523a9c5aa42.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_14af98a4093869be583ff11e12593f523a9c5aa42.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_14af98a4093869be583ff11e12593f523a9c5aa42.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_14af98a4093869be583ff11e12593f523a9c5aa42.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 2 (Yellow) Color</div> <div data-valign="middle"><code>fill="#FFF8D6"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color27)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_11701578bde7051301283be350b7693585f8b2745.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_11701578bde7051301283be350b7693585f8b2745.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_11701578bde7051301283be350b7693585f8b2745.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_11701578bde7051301283be350b7693585f8b2745.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_11701578bde7051301283be350b7693585f8b2745.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 2 (Yellow) Color</div> <div data-valign="middle"><code>fill="#FFDF72"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color26)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_17ab985fb86b1e6af7862f73c19d6c42ee6eb4f5c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17ab985fb86b1e6af7862f73c19d6c42ee6eb4f5c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17ab985fb86b1e6af7862f73c19d6c42ee6eb4f5c.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_17ab985fb86b1e6af7862f73c19d6c42ee6eb4f5c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_17ab985fb86b1e6af7862f73c19d6c42ee6eb4f5c.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 3 (White) Color</div> <div data-valign="middle"><code>fill="#FFFFFF"</code> and <code>fill="white"</code> and <code>fill="#fff"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color8)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_19b87793eb6461c471179a43d10e64dc3e0be7a8b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_19b87793eb6461c471179a43d10e64dc3e0be7a8b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_19b87793eb6461c471179a43d10e64dc3e0be7a8b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_19b87793eb6461c471179a43d10e64dc3e0be7a8b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_19b87793eb6461c471179a43d10e64dc3e0be7a8b.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Base 4 (Dark Blue) Color</div> <div data-valign="middle"><code>fill="#00144A"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color22)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1fcb7930c3d53f72cbec80f3ae51c762577684d83.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fcb7930c3d53f72cbec80f3ae51c762577684d83.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fcb7930c3d53f72cbec80f3ae51c762577684d83.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1fcb7930c3d53f72cbec80f3ae51c762577684d83.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1fcb7930c3d53f72cbec80f3ae51c762577684d83.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 1 (Pink) Color</div> <div data-valign="middle"><code>fill="#DF1278"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color11)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1f0543168d857c8634b96dbda43c3b5205573d006.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f0543168d857c8634b96dbda43c3b5205573d006.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f0543168d857c8634b96dbda43c3b5205573d006.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1f0543168d857c8634b96dbda43c3b5205573d006.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1f0543168d857c8634b96dbda43c3b5205573d006.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 1 (Pink) Color</div> <div data-valign="middle"><code>fill="#9B015D"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color1)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_16566389d05e29f28d260d2add3589b45a14a460f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 2 (Brown) Color</div> <div data-valign="middle"><code>fill="#C35500"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color15)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 2 (Brown) Color</div> <div data-valign="middle"><code>fill="#8D2A00"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color16)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1b38b05401beab38dbe3079978446c23c6750e0c0.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b38b05401beab38dbe3079978446c23c6750e0c0.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b38b05401beab38dbe3079978446c23c6750e0c0.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1b38b05401beab38dbe3079978446c23c6750e0c0.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1b38b05401beab38dbe3079978446c23c6750e0c0.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 3 (Turquoise) Color</div> <div data-valign="middle"><code>fill="#07838F"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color9)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_149e3f44a47676e6d1dc1724eb6c1a0248ec84604.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_149e3f44a47676e6d1dc1724eb6c1a0248ec84604.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_149e3f44a47676e6d1dc1724eb6c1a0248ec84604.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_149e3f44a47676e6d1dc1724eb6c1a0248ec84604.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_149e3f44a47676e6d1dc1724eb6c1a0248ec84604.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Primary 3 (Turquoise) Color</div> <div data-valign="middle"><code>fill="#035663"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color17)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_1eb4df04e382ecbfe496beabb7551b0c281215656.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1eb4df04e382ecbfe496beabb7551b0c281215656.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1eb4df04e382ecbfe496beabb7551b0c281215656.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1eb4df04e382ecbfe496beabb7551b0c281215656.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1eb4df04e382ecbfe496beabb7551b0c281215656.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Shadow Color</div> <div data-valign="middle"><code>fill="#1B90FF"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color21)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_146848ed47e684930bc29add494fc0a1ba0962179.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_146848ed47e684930bc29add494fc0a1ba0962179.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_146848ed47e684930bc29add494fc0a1ba0962179.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_146848ed47e684930bc29add494fc0a1ba0962179.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_146848ed47e684930bc29add494fc0a1ba0962179.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 1 Color</div> <div data-valign="middle"><code>fill="#FFAB92"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color31)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_13156fa9c43e705722f3049bd0be54a1d5ab14ef2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13156fa9c43e705722f3049bd0be54a1d5ab14ef2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13156fa9c43e705722f3049bd0be54a1d5ab14ef2.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_13156fa9c43e705722f3049bd0be54a1d5ab14ef2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_13156fa9c43e705722f3049bd0be54a1d5ab14ef2.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 1 Color</div> <div data-valign="middle"><code>ill="#FF7F4C"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color3)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_10de570babe456dae67eb575a4965c08a7e79fd7b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_10de570babe456dae67eb575a4965c08a7e79fd7b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_10de570babe456dae67eb575a4965c08a7e79fd7b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_10de570babe456dae67eb575a4965c08a7e79fd7b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_10de570babe456dae67eb575a4965c08a7e79fd7b.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 1 Color</div> <div data-valign="middle"><code>fill="#A93E00"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color28)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="./media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_16566389d05e29f28d260d2add3589b45a14a460f.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 2 Color</div> <div data-valign="middle"><code>fill="#C35500"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color15)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="./media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_1f4284c901659ba343741bf111d687c0c799b3b18.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 2 Color</div> <div data-valign="middle"><code>fill="#8D2A00"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color16)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_18b8d503d492b614b0e2220bc2b74e029388afc3c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_18b8d503d492b614b0e2220bc2b74e029388afc3c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_18b8d503d492b614b0e2220bc2b74e029388afc3c.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_18b8d503d492b614b0e2220bc2b74e029388afc3c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_18b8d503d492b614b0e2220bc2b74e029388afc3c.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 2 Color</div> <div data-valign="middle"><code>fill="#450B00"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color29)"</code></div> </div> <div> <div data-valign="middle"> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media1_111d06789d2658fce7fe4eb06f06ee19991a6f831.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_111d06789d2658fce7fe4eb06f06ee19991a6f831.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_111d06789d2658fce7fe4eb06f06ee19991a6f831.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media%5C_111d06789d2658fce7fe4eb06f06ee19991a6f831.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/cx-ux-best-practice-guide/components/illustration-compliance/media_111d06789d2658fce7fe4eb06f06ee19991a6f831.png?width=750&format=png&optimize=medium</a>" width="40" height="40"> </picture> </div> <div data-valign="middle">Skin 3 Color</div> <div data-valign="middle"><code>fill="#340800"</code></div> <div data-valign="middle"><code>fill="var(--sapContent_Illustrative_Color30)"</code></div> </div></p>
4 – Double check if you have inline styling in your SVG’s code. Simply search for “style” in the code.
If something pops up, replace it with the corresponding fill attribute from the color reference list above. No inline styling allowed in the SVG!
5 – That’s it! Save the files.
How to Add a Color Coded SVG to our CX Illustration Figma Library
Download (for better quality) and watch this how-to video to see the following steps in action:
1 – Drop SVGs in Figma file
Simply drag and drop the illustration SVGs from your desktop in the CX Illustration Figma library. It’s normal that the SVGs are either rendered black or white, no worries.
Screenshot your illustration (with all visible colors), drag and drop it to the CX Illustration library for your reference.
2 – Rewrite the Theming Parameters with Figma Variables
Ensure the file has access to the Figma library “SAP Web UI Kit” which also includes our design system variables. Select a vector of your SVG and go to the “Fill” group in the right Figma panel. Click on the icon “Apply styles and variables”, go to the tab “Libraries” and search for “illus”. Then you see all illustrative colors variables. In sum, these are 31 variables. Select the one you want the vector’s color code be replaced with. Repeat these steps for all vectors of all your illustrations.
3 – Copy and Paste each Illustration to our CX Illustration Template
Copy and paste the CX Illustration Template and fill it out for your illustration set. An illustration set always contains four illustration sizes: Large, Medium, Small, and ExtraSmall.
Select all vectors of an illustration, copy them and paste them in the Large, Medium, Small, or ExtraSmall placeholder in your CX Illustration Template. You can delete the placeholder background vector afterwards. Repeat this step for all four illustrations.
4 – Inform your Design System Expert about New SAP-wide Illustration
Drop your Design System Expert a note and link to your stored SVGs (outside Figma) if you’ve added a SAP-wide illustration set. She’ll take the next steps to include it in our SAP design system and make it available for all SAP technologies. Thank you! ☺️
Related Links
Elements and Controls
–
Implementation
- Illustrated Message (SAPUI5 Component)
- Illustrated Message (SAPUI5 Web Component)
- Illustrated Message (FundamentalNGX Component)
Visual Design
- SAP Illustration Product Style Guide v1.2 (PDF version)
- SAP Illustration Product Style Guide (wiki page)
- SAP product illustration collection overview (provided by Core Design)