SVG images

[Adam Howard]

Propose the XenForo update their image format to SVG for better mobile web display and overall visual display.

Also support that style properties can accept svg values.

 

[HWS]

Yeah, in 1.2.

 

[cclaerhout]

Propose the XenForo update their image format to SVG for better mobile web display and overall visual display.

Also support that style properties can accept svg values.

I've just worked the last days with svg to try to update the breadcrumbs arrows with a vector graphic (create using the path element), it's working well but there's is an issue with background pattern. Over three breadcrumb items, the background image pattern is not display anymore. If I can't find why, I will release the addon with the svg option but without the svg pattern background.

All this to say choosing SVG format might not be the best update to do even if it could be very attractive.

 

[cclaerhout]

Example: http://jsfiddle.net/gw8ZJ/ (which is working on jsfiddle but not on Xenforo after 3 items inside the breadcrumb )
Better example... which is still working on jsfiddle with the same code
http://jsfiddle.net/mabeL/

 

[Adam Howard]

If I remember correctly....

There is a few things beyond a template edit. A few php file edits have things hard coded. XenForo would need to have a few less dependencies forced within the files and more toward the flexibility of the template for it to truly support the rendering.

This is something we would need to see in another version. Unless people don't mind patching their own core files.

 

[cclaerhout]

I've finally find how to use background patterns with svg graphics... That's not really easy. The code in jsfidle is correct.

I give a detailed solution here because he could be helpful for some users

Let's take this example (don't focus on those variables: {$svgHeight} & {$svgImgHeight} ; we don't care here) :

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="{$svgHeight}">
                <desc><xen:comment>Svg Arrow Inner</xen:comment></desc>
                <defs>
                        <pattern id="svg_breadcrumb_arrow_bk" height="{$svgImgHeight}" width="{$svgImgWidth}" patternUnits="userSpaceOnUse">
                            <image x="0" y="0" opacity="1" height="{$svgImgHeight}" width="{$svgImgWidth}" xlink:href="{$svgImgUrl}" />
                        </pattern>
                </defs>
                <g>
                    <path class="layer_color" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z"></path>
                        <path fill="url(#svg_breadcrumb_arrow_bk)" class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>
                </g>
            </svg>

The "path fill" draws our graphic. If we want to use a pattern inside (a background) we need to link it to the proper pattern which is above inside the "pattern" tag using a "image tag". The image tag is using a "xlink:url" command ; more information about the xlink here:
http://www.w3.org/TR/xlink/
http://www.w3schools.com/xlink/xlink_reference.asp
http://www.w3schools.com/xlink/xpointer_example.asp

This simple code is working great... but only on XenForo index. After the page url will dynamically changed according to which page you're looking... and then this command "fill="url(/#svg_breadcrumb_arrow_bk)" will not work anymore.

The solution seems to include the full url of the page being viewed before the #.
For example:
To get the pattern works inside this page url:

http://xenforo.com/community/forums/have-you-seen/

The link must be:

fill="url(http://xenforo.com/community/forums/have-you-seen/#svg_breadcrumb_arrow_bk)"

Now to get the pattern works inside this page:

http://xenforo.com/community/threads/svg-images.41864/#post-451301

fill="url(http://xenforo.com/community/threads/svg-images.41864/#svg_breadcrumb_arrow_bk)"

If someone knows a better solution, it would be nice to share it.

 

[cclaerhout]

Ok, here is the easiest way to do it on XenForo:

                        <path fill='url({$requestPaths.fullUri}#svg_breadcrumb_arrow_bk)' class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>

The template variable {$requestPaths.fullUri} will make it work... without any problem on Firefox & Chrome. On Opera there is one condition: the link of the image,
{$svgImgUrl} in xlink:href="{$svgImgUrl}" must be the full path and not the relative path.

This trick doesn't work on IE9...

 

[cclaerhout]

The solution on IE9 is... to put nothing:

fill="url(#svg_breadcrumb_arrow_bk)"

Still needs to test IE10...

Edit: On IE10 both are working. And the IE10 compatibility mode for IE9 is working too whereas it should not. So I would need to use a conditional for IE9.

 

[cclaerhout]

Here is the final solution with the help of this addon for the IE9 conditional

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{$svgWidth}" height="{$svgHeight}">
                <desc><xen:comment>Svg Arrow Inner</xen:comment></desc>
                <defs>
                        <pattern id="svg_breadcrumb_arrow_bk" height="{$svgImgHeight}" width="{$svgImgWidth}" patternUnits="userSpaceOnUse">
                            <image x="0" y="0" opacity="1" height="{$svgImgHeight}" width="{$svgImgWidth}" xlink:href="{$svgImgUrl}" />
                        </pattern>
                </defs>
                <g>
                    <path class="layer_color" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z"></path>
                        <xen:set var="$svg_full_url">{xen:if "{$visitor.getBrowser.IEis} != 9", "{$requestPaths.fullUri}", ""}</xen:set>
                        <path fill="url({$svg_full_url}#svg_breadcrumb_arrow_bk) @magicbreadcrumb_arrow_normal.background-color" class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>
                </g>
            </svg>

$svgImgUrl => must be a full url.

 

[cclaerhout]

The Addon with those SVG graphics is here.

 

[tyteen4a03]

With responsive design, please turn the sprites into vectors so they can stand the zoom in.