0

This is a follow-up to How can I embed an SVG image using JSF/OmniFaces/PrimeFaces?

In that question, I learned that the OmniFaces-2.1 snapshot supports utilizing InputStream/byte[] through it's o:graphicImage tag.

In Getting started with SVG graphics objects in JSF 2.0 pages I learned that the standard graphicImage tags simply renders an img tag and SVG's should be rendered as and object tag like this: <object type="image/svg+xml" data="#{bean.svgUrl}">.

My question is really directed directly at BalusC from the OmniFaces project:

Should not o:graphicImage render SVG's in this manner? All I'm getting is img-tags and they don't work in IE10+.

Update #2: It's a scaling problem! I set the height to 125 and started seeing the edge my graphic.

UPDATE #1: Example rendered img tags:

This one is just based on a static SVG file: <img height="25" alt="" src="/javax.faces.resource/images/Logo.svg.xhtml;jsessionid=cc0acf6def65ac5c127d09384977?ln=default">

This is based on a byte array: <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMzE5LjEzNzUxIgogICBoZWlnaHQ9IjI3OS40NjI0OSIKICAgaWQ9InN2ZzIiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTgiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM2IiAvPjxnCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNSwwLDAsLTEuMjUsMCwyNzkuNDYyNSkiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xLDAuMSkiCiAgICAgICBpZD0iZzEyIj48cGF0aAogICAgICAgICBkPSJNIDEzNTMuOTYsMjE4OS44OCAyNTM5Ljc5LDEzNSBjIDguNjUsLTEzLjY5MSAxMi4yNCwtMjguODAxIDEyLjI0LC00NC42NDA2IDAsLTQ4Ljk2MSAtMzkuNiwtODkuMjgxMjcgLTg5LjI4LC04OS4yODEyNyBsIC0yMzcyLjM5ODQsMCBjIC00OC45NjEsMCAtODkuMjc3MzgsNDAuMzIwMjcgLTg5LjI3NzM4LDg5LjI4MTI3IDAsMTUuODM5NiA0LjMyMDMxLDMxLjY3OTYgMTIuMjQyMTgsNDUuMzUxNiBMIDExOTkuMTYsMjE4OS44OCBjIDM0LjU2LDU5Ljc2IDEyMC4yMyw1OS43NiAxNTUuNTEsLTAuNzIgbCAtMC43MSwwLjcyIgogICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgICBpZD0icGF0aDE0IgogICAgICAgICBzdHlsZT0iZmlsbDojZjE0ODI0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAvPjxwYXRoCiAgICAgICAgIGQ9Ik0gMTM1My45NiwyMTg5Ljg4IDI1MzkuNzksMTM1IGMgOC42NSwtMTMuNjkxIDEyLjI0LC0yOC44MDEgMTIuMjQsLTQ0LjY0MDYgMCwtNDguOTYxIC0zOS42LC04OS4yODEyNyAtODkuMjgsLTg5LjI4MTI3IGwgLTIzNzIuMzk4NCwwIGMgLTQ4Ljk2MSwwIC04OS4yNzczOCw0MC4zMjAyNyAtODkuMjc3MzgsODkuMjgxMjcgMCwxNS44Mzk2IDQuMzIwMzEsMzEuNjc5NiAxMi4yNDIxOCw0NS4zNTE2IEwgMTE5OS4xNiwyMTg5Ljg4IGMgMzQuNTYsNTkuNzYgMTIwLjIzLDU5Ljc2IDE1NS41MSwtMC43MiBsIC0wLjcxLDAuNzIgeiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGgxNiIKICAgICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2YxNDgyNDtzdHJva2Utd2lkdGg6Mi4xNTAwMDAxO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAxMjc2LjkxLDE3ODcuNCA4NzYuMjQsLTE1MTcuNzU5IC0xNzUzLjE4NSwwIDg3Ni45NDUsMTUxNy43NTkiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoMTgiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAxMjc2LjkxLDE3ODcuNCA4NzYuMjQsLTE1MTcuNzU5IC0xNzUzLjE4NSwwIDg3Ni45NDUsMTUxNy43NTkgeiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGgyMCIKICAgICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZmZmZjtzdHJva2Utd2lkdGg6Mi4xNTAwMDAxO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAxNTQyLjU5LDEyMDcuNzkgLTI1NC44OCw2OS4xMiBjIC0wLjcyLDAgLTAuNzIsMCAtMS40NCwwIC0zLjU5LDAgLTYuNDgsLTIuODcgLTYuNDgsLTYuNDcgMCwtMS40NCAwLC0yLjE2IDAuNzIsLTIuODkgbCAzNy40NCwtNjQuMDYgLTE5MS41MSwtNzAuNTcgQyA5ODAuMjczLDEwNzkuNjQgODgzLjA3NCw5MzkuOTYxIDg4My4wNzQsNzg0LjQ0MSBsIDAsLTQzNC44ODIgMTYwLjU1NiwwIDAsNDM1LjYxMyBjIDAsODcuMTA5IDU0LjcyLDE2NS41OSAxMzYuOCwxOTUuODI4IGwgMTkyLjk2LDcxLjI4IDEyLjk2LC03Mi43MjEgYyAwLjczLC0yLjg3OSAzLjYxLC01LjAzOSA2LjQ4LC01LjAzOSAyLjE3LDAgMy42MSwwLjcxOCA1LjA1LDIuODcxIGwgMTQ5Ljc1LDIxNi43MjkgYyAwLjcyLDEuNDQgMS40NCwzLjYgMS40NCw1LjA0IDAsNC4zMyAtMi44OCw3LjkyIC02LjQ4LDguNjMiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoMjIiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyMzFmMjA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAxNTQyLjU5LDEyMDcuNzkgLTI1NC44OCw2OS4xMiBjIC0wLjcyLDAgLTAuNzIsMCAtMS40NCwwIC0zLjU5LDAgLTYuNDgsLTIuODcgLTYuNDgsLTYuNDcgMCwtMS40NCAwLC0yLjE2IDAuNzIsLTIuODkgbCAzNy40NCwtNjQuMDYgLTE5MS41MSwtNzAuNTcgQyA5ODAuMjczLDEwNzkuNjQgODgzLjA3NCw5MzkuOTYxIDg4My4wNzQsNzg0LjQ0MSBsIDAsLTQzNC44ODIgMTYwLjU1NiwwIDAsNDM1LjYxMyBjIDAsODcuMTA5IDU0LjcyLDE2NS41OSAxMzYuOCwxOTUuODI4IGwgMTkyLjk2LDcxLjI4IDEyLjk2LC03Mi43MjEgYyAwLjczLC0yLjg3OSAzLjYxLC01LjAzOSA2LjQ4LC01LjAzOSAyLjE3LDAgMy42MSwwLjcxOCA1LjA1LDIuODcxIGwgMTQ5Ljc1LDIxNi43MjkgYyAwLjcyLDEuNDQgMS40NCwzLjYgMS40NCw1LjA0IDAsNC4zMyAtMi44OCw3LjkyIC02LjQ4LDguNjMgeiIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGgyNCIKICAgICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzIzMWYyMDtzdHJva2Utd2lkdGg6Mi4xNTAwMDAxO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtZGFzaGFycmF5Om5vbmUiIC8+PC9nPjwvZz48L3N2Zz4=" alt="100.1 - Farlig sving" title="100.1 - Farlig sving" width="40" style="margin-left: 3px; pointer-events: none;" height="40">

Community
  • 1
  • 1
matsa
  • 346
  • 5
  • 16
  • That question was from 2010. As per http://caniuse.com/#feat=svg-img IE9+ should support it. IE9 was introduced half 2011. How exactly does it fail? – BalusC Feb 18 '15 at 12:13
  • I've updated with a couple of examples. These render fine in FF and Chrome, but are simply invisible in IE. – matsa Feb 18 '15 at 12:58
  • 1
    As per your update, aha, scaling problem indeed. Check http://stackoverflow.com/questions/9777143/svg-in-img-element-proportions-not-respected-in-ie9, http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/, https://gist.github.com/larrybotha/7881691, etc – BalusC Feb 19 '15 at 13:35

1 Answers1

2

Since I discovered this to be a SVG scaling problem and I seem not to be the only one who has encountered this I'll post my solution here.

In short, I

  • Retrieve the SVG.
  • Parse it using JDOM.
  • Inject a view box if it is missing based on the specified size

Here's the Java code without error handling:

    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    InputStream is = execute(builder.buildGet(), InputStream.class);
    Document doc = new SAXBuilder().build(is);
    Element root = doc.getRootElement();
    if (root.getAttribute("viewBox") == null)
    {
            String width = root.getAttributeValue("width"), height =  root.getAttributeValue("height");
            root.setAttribute("viewBox", String.format("0 0 %s %s", width, height));
    }

    new XMLOutputter().output(doc, baos);
    return baos.toByteArray();
matsa
  • 346
  • 5
  • 16