he following banner is an example of what i want:
https://top.gg/api/widget/535064930727100427.svg
https://top.gg/api/widget/698275428976164945.svg
It's automatically generated and contains dynamic text which causes the "background color" to automatically adjust its size to it as well as have a border radius.
The text and shapes are all paths when I look at the source.
I would like to know how this has been accomplished as SVG itself does not support a dynamic border radius and background color by default.
Somewhere in the SVG source of the links above it showsid="surface19" and I did some research to see what piece of software or library provides such ID's. The text also seems to automatically be converted to paths, so it's not a hand-written SVG that gets modified programmatically from what it seems.
I did a lot of research before asking this question.
Related
I have an SVG graphic that I want to put some text on from my PHP variables. The graphic was generated in Illustrator and resizes in my web page to 100% width. Here is a representation of it:
How could this be done for the 8 text items? Does something special need to be done in Illustrator, like creating an anchor point for the text? How do I update the text item? I've done research but haven't been able to find a similar situation.
Thankful for any information that could help me narrow down my search.
Being someone who has never worked with files of .SVG file type before, this was a misunderstanding.
If you design a graphic in Adobe Illustrator, save it as an SVG and edit it with your favorite text editor, you will be able to see the SVG mark-up. It all makes sense now, and here you will be able to change the text at the code-level.
For my application, I saved the SVG as a PHP file and did an include on it, while changing the raw text to PHP variables in said file. This allowed me to pass my dynamic text as variables to the graphic.
I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.
Does webkit/wkhtmltopdf not support icc-color profiles in fill colours in SVG images?
I have an image that has the colour defined as:
#e22e27 icc-color(U.S.-Web-Coated--SWOP--v2, 0.0558938, 0.95947204, 0.98716716, 0.00204471)
Which is supposed to come out red (and does in inkscape)
However, chrome (and other browsers) just open it as black (I'm guessing because it can't get the fill colour?) and also wkhtmltopdf also comes out as black.
Is there any way of doing this? Or more specifically is there any way of defining a device spot colour in the SVG so that the final PDF can have a spot red (rather than a composite of RGB)?
Thanks
if you open the SVG in Inkscape 0.92 after removing the sRGB value #e22e27 I expect you will see black instead of red. This is because even when using the CMYK colour picker, Inkscape reads and writes fallback sRGB values from/to the SVG file. Native CMYK support is still in Inkscape's future, as far as I can tell.
Among the open source PDF renderers, mPDF supports defining spot colours by CMYK values and also supports embedding a subset of SVG in HTML, suggesting that it can read some SVG syntax natively. This would be a better starting point for a fully open source solution than wkhtmltopdf which does not support CMYK output at all, according to issue #39 on its GitHub project.
Of the proprietary renderers, PDFreactor supports passing CMYK values from an SVG directly to the renderer as long as they are not rasterised, although the syntax does not appear to match the W3C SVG spec and there is no sRGB fallback, so each SVG has to be specially crafted. This is quite easy for simple graphics originated in Inkscape; just replace for example in your SVG:
style="fill:#e22e27 icc-color(U.S.-Web-Coated--SWOP--v2, 0.0558938, 0.95947204, 0.98716716, 0.00204471);fill-opacity:1;fill-rule:nonzero;stroke:none"
with the C, M, Y, K values only:
style="fill:cmyk(0.0558938, 0.95947204, 0.98716716, 0.00204471);fill-opacity:1;fill-rule:nonzero;stroke:none"
I've recently used this technique in an attempt to match colours between SVGs and CMYK values specified in CSS for the document, for example between logos and font colours. See CSS Color Module Level 4 for the emerging device-cmyk syntax; in the meantime PDFreactor uses the non-standard cmyk syntax for CSS, as shown in the SVG example above.
In general, I'm wondering about the value of embedding a colour profile in a natively CMYK SVG. Perhaps the assumption is that we are starting from an sRGB value and need an approximation of it, but in my workflow I'm starting from CMYK values. I'd welcome clarification on that. Besides, it would be rather time-consuming to re-create every SVG file just because the printing machine, continent or paper has changed.
I am working on an application where I need to display color coded indicators. The standard colors will be red/amber/green, but I need to be able to pick any color (e.g. by hex value). The colors are updated dynamically by a script, based on data (dashboard style).
Are there libraries that could help me? I am thinking in particular about using svg or canvas graphics that the script could modify.
Note: the question has been rephrased to better explain the context.
I like this collection on WikiCommons. They are in SVG
http://commons.wikimedia.org/wiki/Tango_icons
Here are a couple of links to start with:
nounproject
openiconlibrary
openclipart
small iconset for use with raphaël
Is there any program that can convert a file into an animated gif by taking the bytes (whatever I see on an editor is seen) and producing them on frames? Im trying to change a large script I wrote into an image so that if I run it, it looks like as if the code is scrolling. I would use photoshop, if I knew how to use it. Even then, the code is really big, so I dont want to be doing it frame by frame.
Whatever you see on the editor screen is ... a screenfull, so why not a screen capture program like http://www.faststone.org/FSCaptureDetail.htm
However, I suspect that you want to convert the entire file to a gif, since you talk of scrolling. Is that so?
If so, be aware that animated GIFs are limited to 8 frames, so you might want to convert to another movie format.
You could, for instance, Google for "text to MPEG". If nothing does it directly, get something that adds subtitles & make your video a solid white background *or match your webpage).
Maybe simpler is something like this ...
A Scrolling Text Applet - Now Free. - Provide an animated look and feel to your web pages. Scrolling Text is a Java applet that will automatically size itself to the available area given to it by the HTML form via the WIDTH and HEIGHT properties of the APPLET tag. There are many configurable features of this applet including title, colors, font size and style, border width and color, graphics, background images etc.
Configurable parameters including;
Background Color - Define your desired background color
Title - If you want a stationary title then include this parameter
Font Size and Style - All text can have it's own Font size and style
Text Color - Specify the color of the text with this one
Border Width and Color - If you require a border then define it with these 2 parameters
Scroll Speed - Customise the Scroll Speed
Display Time - Vary the Display time of each page
This applet is easy to implement and configure and along with the example and help files you should have no trouble implementing your own customised Scrolling Text in your web pages. No understanding of java programming is required, everything is adjusted by parameters in the HTML tags.
Now FREE.
+1 for an interesting question.