Conversation
|
@Andrew-Paystack can you please check the following: Failure: bin/rails test /home/runner/work/payment_icons/payment_icons/test/unit/payment_icon_test.rb:61 ........... |
Seen the issue and fixed it @dannye0231 |
|
@Andrew-Paystack are you able to change your borders so that they match with what we have in our Contribution guide? Here is an example next to an approved icon: 
|
|
Almost there, but its still off by a bit: 
Feel free to use the example in our Contributions guide to match it up on your SVG |
|
SVG Validation Results - REVISED✅ Root
|
| Requirement | Status |
|---|---|
XML Namespace (xmlns) |
✅ Present: xmlns="http://www.w3.org/2000/svg" |
| Role | ✅ Correct: role="img" |
| ViewBox | ✅ Defined: viewBox="0 0 38 24" |
| Dimensions | ✅ Specified: width="38" height="24" |
Accessibility (aria-labelledby) |
✅ Present: aria-labelledby="pi-pesalink" |
✅ Nested <title> Tag and Accessibility
| Requirement | Status |
|---|---|
| Title Inclusion | ✅ Present: <title id="pi-pesalink">Pesalink</title> |
| ID Match | ✅ Matches: id="pi-pesalink" matches aria-labelledby |
| Accessibility Purpose | ✅ Provides screen reader description |
✅ Graphic and Structure Requirements
| Requirement | Status |
|---|---|
| Vector Graphics Only | ✅ Uses only <rect>, <path>, <g>, <clipPath>, <defs> |
| No Embedded Media | ✅ No fonts or bitmaps |
| No Base64 Images | ✅ None present |
| Standard Structure | ✅ Properly nested elements with clip paths |
| Organization | ✅ Well-organized with grouping and definitions |
✅ Styling and Naming Conventions
| Requirement | Status |
|---|---|
| Inline Styles | ✅ All styles inline (fill, stroke attributes) |
| No Class Attributes | ✅ No classes present |
| ID Naming Convention | ✅ Follows pi- prefix: pi-pesalink, pi-pesalink-clip0_1107_574 |
❌ Clarity and Quality Checks
| Requirement | Status |
|---|---|
| Readability | ✅ Clear and recognizable multi-color logo |
| Color Contrast | ✅ Excellent contrast (dark/vibrant colors on white) |
| Logo Background | ✅ White background appropriate |
| Border Dimensions | ❌ INCORRECT: Uses rx="4" and rx="3.5" - should use rx="2" and rx="2.5" to match template |
| File Size | ✅ Under 10kb |
| Optimization | ✅ Well-optimized with proper use of clip paths |
❌ Overall Result: FAIL
Issue Found: The border radius dimensions are incorrect. The template uses rx="2" for rounded corners, but this SVG uses rx="4" and rx="3.5", making the corners too rounded.
Required Fix:
- Change
<rect width="38" height="24" rx="4" fill="#fff"/>torx="2" - Change
<rect x=".5" y=".5" width="37" height="23" rx="3.5".../>torx="2.5"
|
@Andrew-Paystack are you able to address the issues mentioned above? |
|
@dannye0231 yes this is fixable. I'll work on it. Thank you. |
@dannye0231 This is complete. Please let me know if it passes. |
|
Hi @Andrew-Paystack , looks good but I just had a few minor call-outs which I was wondering if you can address: SVG Validation Results for "Pesalink"✅ Passed Checks
|
| Item | Status | Notes |
|---|---|---|
| Unnecessary Complexity | Uses <clipPath> and <defs> which add complexity not in template |
|
| Root SVG Attributes | Contains fill="none" on root <svg> tag (not in template) |
❌ Failed Checks
None - All required validation requirements passed!
Recommendations
While this SVG passes all mandatory requirements, consider these optimizations to better match the template standard:
-
Remove clipPath: The
<clipPath>wrapper appears unnecessary. The clipping path creates an 18x18 white rectangle at transform="translate(10 3)", but this could likely be simplified. -
Remove
fill="none"from root: The root<svg>tag hasfill="none"which is not present in the template. -
Consider simplification: The logo uses multiple complex paths that might be optimizable while maintaining visual fidelity.
The Pesalink logo is well-structured with clear visual elements in orange, blue, red, teal, and black that create a distinctive payment icon.
|
Hi @dannye0231 , I was able to work on items 1 & 3 however, I couldn't find a way to remove the fill none without affecting the rest of the elements. |
|
Hi @Andrew-Paystack , taking a look at the latest icon, it looks like the clippath issue is the only thing remaining which needs to be addressed: SVG Validation Results✅ Root
|
| Requirement | Status | Notes |
|---|---|---|
XML Namespace (xmlns) |
✅ | Present: xmlns="http://www.w3.org/2000/svg" |
| Role | ✅ | Present: role="img" |
| ViewBox | ✅ | Present: viewBox="0 0 38 24" |
| Dimensions | ✅ | Present: width="38" height="24" |
Accessibility (aria-labelledby) |
✅ | Present: aria-labelledby="pi-pesalink" |
✅ Nested <title> Tag and Accessibility
| Requirement | Status | Notes |
|---|---|---|
| Inclusion | ✅ | <title id="pi-pesalink">Pesalink</title> |
| ID Match | ✅ | ID pi-pesalink matches aria-labelledby |
| Purpose | ✅ | Provides screen reader accessibility |
⚠️ Graphic and Structure Requirements
| Requirement | Status | Notes |
|---|---|---|
| Vector Graphics Only | ✅ | Uses <rect>, <path> elements |
| No Raster Images | ✅ | No bitmap images present |
| No Embedded Fonts | ✅ | No fonts embedded |
| No Base64 Images | ✅ | No base64 encoding |
| Standard Structure | ❌ | CRITICAL ERROR: Missing <clipPath> definition- References clip-path="url(#a)" on <g> element- No <clipPath id="a"> is defined in SVG- This will cause rendering issues |
| Organization | Structure incomplete due to missing definition |
✅ Styling and Naming Conventions
| Requirement | Status | Notes |
|---|---|---|
| Inline Styles | ✅ | Styles applied via attributes (fill, stroke) |
No <style> Tags |
✅ | No style blocks present |
| No Class Attributes | ✅ | No classes used |
| ID Naming Convention | ✅ | Uses pi-pesalink prefix |
✅ Clarity and Quality Checks
| Requirement | Status | Notes |
|---|---|---|
| Readability | Cannot fully assess due to missing clipPath | |
| Color Contrast | ✅ | Good contrast with multiple colors |
| No Solid Background | ✅ | White background with border |
| Border Visibility | ✅ | Border properly defined with stroke method |
| Optimization | ✅ | File appears optimized |
Summary
Overall Status: ❌ FAILS
Critical Issue:
The SVG references a clip path (clip-path="url(#a)") that is not defined anywhere in the document. This means:
- The
<g>element attempts to use a clipping mask that doesn't exist - Browsers will ignore the clip-path reference
- The icon may render incorrectly or show unwanted overflow
Required Fix:
Either:
- Add the missing
<clipPath id="a">definition with appropriate clipping shape, OR - Remove the
clip-path="url(#a)"attribute from the<g>element if clipping is not needed
Recommendation: ❌ REJECTED - Cannot approve until the missing clipPath definition is added or the reference is removed.
|
Closed due to no response |
2 participants
Why are you adding this icons?
I'm adding this icon because it is part of the payments ecosystem in Kenya and will be helpful for our Shopify plugin
Help us identify yourself
Link to the brand guidelines:
Checklist to add new icons
db/payment_icons.ymlIf this pull request is not adding new icons, you can remove this checklist.
Attach a screenshot of the icon along side the example Visa icon
Tips how to create a screenshot
We have found free online SVG editor https://www.freecodeformat.com/svg-editor.php very useful to create one. Here is a sample code for you to verify that you icon appears properly along side the placeholder.
If the icons are intended for use by Shopify, please provide the following info:
We're in touch with Danny. We're a payment partner and already have a Shopify app published.
What's the expected date of this change to deploy on Shopify?